Div 스트레칭 내 Div

나는 사이트를 디자인하고 있으며 현재 스타일링 작업을하고 있습니다. 3 개의 열 레이아웃 (두 개의 큰 내용 열, 하나의 작은 navbar 열)과 미적 목적으로 만 존재하는 몇 개의 "래퍼"div가 있습니다. 내가 그들 콘텐츠의 양이 증가를 설명 할 수있는 변수 높이가되고 싶어요Div 스트레칭 내 Div

<div id="out_wrapper"> 
    <div id="in_wrapper"> 
     <div id="nav"> ... content ... </div> 
     <div class="column"> ... content ... </div> 
     <div class="column"> ... content ... </div> 
    </div> 
</div>

div의 영역 고정 폭의 각하지만, 다음 HTML은 다음과 같이 보인다. in_wrapper와 out_wrapper의 높이가 포함 된 div보다 약간 더 커야하고 작동하도록 할 수는 없습니다. height 대신 min-height을 설정하고 height 속성을 모두 삭제하려고 시도했지만 콘텐츠를 스트레칭하기 위해 in_wrapper 또는 out_wrapper를 얻을 수 없습니다. 기둥이 잘 늘어납니다.

또는 오버플로를 auto로 설정하고 스크롤링을 허용 할 수 있습니다. 이는 고정 크기로 사이트를 유지할 수 있지만 바람직하지 않은 결과 인 것으로 보입니다.

사이트가 요구 사항에 따라 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">을 사용합니다.

출처

2011-02-01 KChaloux

당신이 out_wrapper에 패딩을 설정하고 in_wrapper 않았다 부모뿐만 아니라 위치 요소 만들기 <div style="clear:both"></div>

를? – bleepzter

[1] (http://stackoverflow.com/questions/1065408), [2] (http://stackoverflow.com/questions/992073/), [3] (http : // stackoverflow.com/questions/2627768/). 또한이 문제를 해결하는 960.gz, 청사진 및 객체 지향 CSS 프레임 워크를 살펴 봐야합니다. –

두 래퍼의 높이를 auto으로 설정하고 아래쪽에 채우기를 추가하십시오. 또한 어린이가 떠있는 경우 overflow:hidden.

#out_wrapper, #in_wrapper { height:auto;padding-bottom:10px;overflow:hidden;}

출처

2011-02-01 22:50:14 Stephen

우수. 매력처럼 일했습니다! SE가 허락하자마자이를 수락합니다. – KChaloux

모든 항목 다음에 삭제 된 div를 추가 했습니까? 마찬가지로

<div style="clear:both"></div>

이렇게하면 용기가 전체 높이까지 내려 가게됩니다. 그런 다음 여분의 공간을 만들기 위해 여백 및/또는 패딩을 추가하십시오.

출처

2011-02-01 22:50:30

이 * *는 떠 다니는 요소 주위의 컨테이너를 해결하기 위해 작동하지만 불필요한 마크 업입니다. 컨테이너는 CSS에'overflow : hidden'을 적용하기 만하면됩니다. – Stephen

상위 태그가 하위 태그를 둘러 쌀 정도로 늘어나지 않으면 하위가 플로팅 또는 위치 지정을 통해 문서의 정상적인 흐름에서 벗어 났을 가능성이 큽니다. 아이를 다시 흐름으로 가져와야합니다. 이렇게하려면 몇 가지 방법이 있습니다.

요소를 플로팅하는 컨테이너 요소에 스타일 overflow:auto을 추가합니다.

떠내려 내용 후 비 의미 '명확하게'사업부를 추가 : position:relative;

출처

2011-02-01 22:54:12 Moses

+1 : 솔루션에 대한 모든 방법을 찾지 못했지만 문제가 발생한 이유를 설명하는 데 도움이되었습니다. 참으로 거기에 수레가있었습니다. – KChaloux

Div 스트레칭 내 Div

답변

관련 문제