내용의 높이까지 컨테이너 div를 확장하려면 어떻게해야합니까?

div의 내부 내용 (정렬되지 않은 목록)의 높이까지 컨테이너 div를 확장하고 싶습니다. 나는 그것을 작동시킬 수 없다. 어떤 아이디어?내용의 높이까지 컨테이너 div를 확장하려면 어떻게해야합니까?

는 HTML :

은

<div class="container"> 
    <ul id="list"> 
     <li>stuff</li> 
     ... 
    </ul> 
</div>

는 CSS :처럼,

.container { 
    width: 332px; 
    height: 100%; 
    padding: 0.4em; 
    position: relative; 
    overflow-y:scroll; 
    overflow-x:hidden; 
} 

#list { 
    position: absolute; 
    height:auto; 
    width:317px; 
}

출처

2012-06-07 John Anderson

왜 절대적으로 위치가 지정됩니까? 이것은 절대적으로 아이의 위치를 정하기 때문에 정상적인 흐름에서 벗어날 수 있기 때문에 원하는대로 작동하지 않습니다. –

@Interstellar_Coder에 동의합니다 - 달성하고자하는 것을 알려주십시오. –

이 .container에서 height: 100%; 및 position: relative;를 제거하고 #list에서 position: absolute;를 제거합니다.

출처

2012-06-07 17:58:46

... 거기에있는 사람들이 우리에게 말하지 않거나 우연히 예에서 벗겨 내지 않는 이유가 없으면 .... –

그걸 수정했습니다. 감사! –

당신이 그것을 확장 할 귀하의 요구 사항을 가진 overflow-y:scroll 충돌 (작동하지 않는) 100 %를 기반으로하는 height:100% 때문에 요소 높이가 포함 된 .container에 있습니다. 당신이해야 할 일은

는 height:100% 및 overflow-y:scroll을 제거 overflow-y:hidden로 교체하고 나는 그것이 작동해야 생각 입니다.

추신. #list이 position:absolute이되는 이유는 무엇입니까?

출처

2012-06-07 17:37:45

이 작동하지 않습니다. –

두 가지 옵션 : 어느 것이 높이를 추가 : 100 #list

#list{ 
position: absolute; 
height:auto; 
width:317px; 
height: 100%; 
}

에 대한 % 또는 ID로 컨테이너를합니다

#container{ 
... 
}

출처

2012-06-07 17:38:36 IgnasK

이 작동하지 않았습니다. –

흠, 내 방법을 모두 결합한이 곳에서 작동합니다. http://jsfiddle.net/2weVn/ – IgnasK

IgnasK 바이올린에는 많은 문제가 있으며, 그 중 하나는 컨테이너가 ID가 아닌 클래스라는 것입니다. –

.container에 대한 최소 너비 및/또는 최대 너비 특성을 설정하십시오.

출처

2012-06-07 18:03:35

내용의 높이까지 컨테이너 div를 확장하려면 어떻게해야합니까?

답변

관련 문제