상자 크기, 왜 높이> 100 %입니까?

간단한 패널에 대한 마크 업을 만들려고합니다. 구조는 아래와 같습니다. "transcluded"가 포함 된 <div>은 상위 컨테이너 <div>을 채워야합니다. 당신이 (http://jsfiddle.net/kAk9Z/에서) 볼 수 있듯이상자 크기, 왜 높이> 100 %입니까?

<div class="container"> 
    <div class="container-title">title</div> 
    <div class="container-body"> 
     transcluded 
    </div> 
</div>

는 "매개자"몸에만 작성하는 대신 컨테이너 넘어 확장.

"복제 된"<div>이 나머지 공간을 채우는 동안 컨테이너의 크기를 유지하려면 어떻게해야합니까?

출처

2014-05-12 core

당신이이 .container의 아이들의 높이의 합이> (100)

그래서 이미 사업부를 포함하는 부모 요소의 높이라고 높이 100 %를 선언 할 때이하는 box-sizing 문제가되지 않습니다

해결책이 position: absolute에 용기 본체를 전환 할 수 있습니다, 여기에 바이올린 : 당신은 당신을 설정하지 왜 http://jsfiddle.net/kAk9Z/2/

.container { 
    width: 640px; 
    height: 480px; 
    background-color: #dededd; 
    padding: 4px; 
    position: relative; 
} 

.container-body { 
    background-color: white; 
    border: 1px solid black; 
    padding: 8px; 
    position: absolute; 
    top: 30px; 
    bottom: 4px; 
    right: 4px; 
    left: 4px; 
}

출처

2014-05-12 20:59:34

는 내부 몸 사업부의 높이입니다. 그렇게하면 컨테이너 div의 높이가 결정되고 원하는 결과를 얻을 수 있습니다. 콘텐츠를 요청할 때 최소 높이로 이동하여 성장할 수도 있습니다. 이런 식으로 뭔가 :

.container { 
    width: 640px; 
    background-color: #dededd; 
    padding: 4px; 
} 

.container-body { 
    background-color: white; 
    height: 100%; 
    border: 1px solid black; 
    padding: 8px; 
    min-height: 460px; 
}

그리고 바이올린 : http://jsfiddle.net/kAk9Z/4/

출처

2014-05-12 21:04:08 Pevara

상자 크기, 왜 높이> 100 %입니까?

답변

관련 문제