div 내부에있는 모든 내용이 포함되지 않습니다.

높이가 100 %이고 단색 테두리 인 div가 있습니다. 콘텐츠가 너무 많으면 div 테두리 밖에 표시됩니다.div 내부에있는 모든 내용이 포함되지 않습니다.

어떻게 화면 크기의 100 % 대신 경계 안의 모든 콘텐츠의 높이로 div를 확장합니까?

높이 : 100 %는 화면 높이를 측정하는 것으로 보이지만 내부의 내용은 측정하지 않는 것 같습니다. 문제 샘플 페이지

<style> 
#container{ 
    height:100%; 
    width:100px; 
    border:1px solid black; 
} 
</style> 
<div id="container">

link

출처

2012-01-10 user1082764

이러한 문제는 애매한 clearfix를 사용하여 쉽게 해결할 수 있습니다! 첫째, 그들은이 필요하지 않을, 당신의 #container에 대해 당신이 가진 모든 height:100%; 선언을 제거하고 CSS에서 이것을 시도 :

#container:before, #container:after { 
    display: table; 
    content: ""; 
    zoom: 1; 
} 

#container:after { 
    clear: both; 
}

출처

2012-01-10 23:39:39

부적처럼 작용했다 – user1082764

나는 tho가 궁금해서 바닥 글을 clearfix 메소드를 사용하여 바닥 글을 얻는 것 같다. 나는 높이 : 50px, clear : 둘 다;하지만 그 자체로 방을주지 않는다. div의 하단에 – user1082764

@ user1082764 귀하의 사이트를 다시 한번 살펴 보았습니다. 귀하는 footer를 적절하게 선언하지 않았고, 당신이 가지고있는'position : absolute' 선언을 제거하고 컨테이너와 같은 폭을 선언 할 수 있습니다. 너비 : 960 픽셀 '이며 바닥에 자체를 포함해야합니다. –

당신은 (컨테이너 외부에서 비행) 당신이 요소를 떠 몇 가지 문제가 있으므로, 용기

#container{ 
    width:100px; 
    border:1px solid black; 
    overflow: hidden; 
}

출처

2012-01-10 23:27:03 eveevans

이 사용 overflow:hidden 올바른에 대한 절대 배치 된 요소는 컨테이너의 높이를 변경하지 않습니다. farbartastic 요소는 절대 위치 지정을 갖기 때문에 컨테이너에 높이 요구 사항을 알리지 않고 배치됩니다.

출처

2012-01-10 23:28:15 aaronblohowiak

아니라 내가 100 % 화면 크기를 측정되는 데 문제가 있지만, 내부 콘텐츠가 아닙니다. 내 전자 필기장은 매우 작은 상자 테두리를 보여 주지만 내 바탕 화면에서는 테두리가 거의 모든 것을 다룹니다. – user1082764

postition : 컨테이너 외부에있는 요소에 문제가 있기 때문에 상대가 해결책이 아닙니다. – eveevans

요소가 컨테이너 외부에 떠 다니는 것이 문제입니다. 배경과 함께 div의 문제는 무엇을 바로 잡으려고합니다. 화면 해상도가 변경되면 div 높이가 변경됩니다. – user1082764

div 내부에있는 모든 내용이 포함되지 않습니다.

답변

관련 문제