상대 위치에서 CSS가있는 DIV의 높이 설정

여러 DIV 레이아웃을 원하는 HTML + CSS 코드가 있습니다. 레이아웃은 다음과 같습니다. 모든 DIV는 크기가 고정 된 상위 DIV에 머물러 있습니다. 그런 다음 각 어린이 DIV는 자체 줄에 있어야하며 내용을 그릴 때 최소 높이를 사용하십시오. 마지막 DIV는 나머지 DIV를 모두 소비해야하므로 부모 DIV가 완전히 채워집니다.상대 위치에서 CSS가있는 DIV의 높이 설정

<html> 
    <head> 
    <style> 
     <!-- 
     .container { 
     width: 500px; 
     height: 500px; 
     border: 3px solid black; 
     } 

     .top { 
     background-color: yellow; 
     float: left; 
     clear: left; 
     width: 100%; 
     } 

     .bottom { 
     background-color: blue; 
     height: 100%; 
     float: left; 
     clear: left; 
     width: 100%; 
     } 
    --> 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="top">top1</div> 
     <div class="top">top2</div> 
     <div class="top">top3</div> 
     <div class="top">top4</div> 
     <div class="bottom">bottom</div> 
    </div> 
    </body> 
</html>

그러나, 마지막 DIV가 부모로부터 오버 플로우 :

이 코드는 float 및 clear 속성 CSS를 사용하여 내 접근 방식을 보여줍니다. 나는 그것이 width: 100% 때문에 그것이다고 생각한다.

이 문제를 해결할 수있는 방법이 있습니까? 부모의 overflow 속성을 설정하는 것을 피하려면 절대 위치 지정을 사용하지 않아야합니다. 어떻게 든 부모의 높이에서 다른 DIV 높이의 합계를 뺀 값을 사용하도록 마지막 DIV를 속일 수 있습니다.

감사합니다.

출처

2009-11-03 Gabriel

상대 위치 지정이 아닌 부동 위치 지정입니다. – elzapp

추가 : 그것은 100 % 폭이기 때문에 그것은

div.container { overflow: hidden; }

넘치는 아닙니다. 이것은 플로트 (float)이므로 일반 레이아웃에서 제거되므로 오버 플로우가 발생합니다. overflow 속성을 변경하면 브라우저가 포함 된 플로트를 처리하는 방법이 변경됩니다.

아, 아직 작성하지 않았다면 DOCTYPE을 사용하고 있는지 확인하십시오. IE의 경우 특히 중요합니다.

출처

2009-11-03 09:57:45 cletus

감사합니다. 예,하지만 피하고자하는 아래쪽 DIV의 일부가 숨겨집니다. 원칙적으로 나는 파란색 DIV 맨 아래에 정렬되어있는 것들을 가질 수 있으며 또한 보여 주어야한다. 제가 원했던 것은 파란 DIV를 수직으로 잡아 당기는 것입니다. – Gabriel

상대 위치에서 CSS가있는 DIV의 높이 설정

답변

관련 문제