정지 사업부 유체 레이아웃

Question

이 같은 브라우저 창 크기를 조절 내 반응 사이트의 중심 사업부 (#content)가에있는 내용으로 축소에서 :

<div id="container"> 
    <div id="content"> 
    <p>Here is some sample text.</p> 
    </div> 
</div> 

#container { 
    width: 100%; 
} 

#content { 
    max-width: 805px; 
} 

이 때 물건을 제외하고, 작동 inside #content은 div의 너비를 내가 설정 한 최대 너비로 밀어 내기에 충분한 수평 공간을 차지하지 않습니다. 예를 들어, 805px 대신 단락 태그 사이에 약간의 내용이있는 내 페이지 중 하나가 740px입니다.

width: 100%을 #content에 추가하려고했지만 div가 크기 조정을 중지합니다.

이 문제를 해결하는 가장 좋은 방법은 무엇입니까? 미디어 쿼리를 사용해야합니까?

Answer 1

답변을 찾았습니다. 나는 width: 100% 필요 못했지만, 나는 또한 box-sizing: border-box이 필요하고 그래서처럼 max-width으로 내 패딩의 추가 폭을 포함하는 데 필요한 :

#content { 
    box-sizing: border-box; 
    width: 100%; 
    max-width: 885px; 
    padding: 40px; 
}