브라우저 창이

가 여기에 전체 페이지의 좁은 될 때 배경 색상의 폭을 유지하는 방법 :브라우저 창이

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 
<head> 
    <style> 
     body {margin: 0; background: yellow;} 

     .bar {width: 100%; background: pink;} 

     .content {width: 800px; margin: 0 auto;} 
    </style> 
</head> 

<body> 
    <div class="bar"> 
     <div class="content"> 
      This is content~ 
     </div> 
    </div> 
</body> 
</html>

내 의도는 분홍색 막대가 브라우저 화면의 전체 가로 길이를 입력하는 것입니다. 윈도우가 800 픽셀보다 넓 으면 바의 내용은 가운데에 머물러 있거나 고정 된 채로 남아 있고 더 좁 으면 가로로 스크롤 할 수 있습니다. 그러나 브라우저가 더 좁아지고 오른쪽으로 스크롤하면 분홍색 막대가 오른쪽 끝에 도달하지 않습니다. 이 경우 신체의 노란색이 대신 보입니다.

이 문제는 최신 Firefox, Chrome 및 IE8에서 확인되었습니다.

출처

2012-06-19 willf

당신은

.content {width: 800px; margin: 0 auto;background: pink;}

또는

콘텐츠의 폭과 바의 최소 폭을 분홍색 내용의 배경을해야 하나.

.bar {width: 100%;min-width:800px;background: pink;}

출처

2012-06-19 13:19:25 gandil

최소 너비 솔루션은 콘텐츠 부분이 다른 bg 색상을 가질 수 있으므로 특히 DRY와는 달리 잘 작동하는 것으로 보입니다. "좁은 브라우저, 오른쪽으로 스크롤 한"상황에서 요소를 검사하는 중 눈치 채 셨습니다. 본문 요소가 가장 오른쪽 테두리에 도달하지 않는 것 같습니다. 분명히 그것은 최소 너비도 필요합니다. – willf

가장 좋은 것은 min-width을 콘텐츠 너비와 동일하게 설정하는 것입니다.

iphone & 태블릿 용 웹 사이트를 만들려는 경우 각 view-port의 너비를 별도로 정의 할 수 있습니다.

출처

2012-06-19 13:33:47

브라우저 창이

답변

관련 문제