하위 div가 상위 div로 확장되지 않음

한 부모와 두 자녀가 있습니다. 부모 DIV 내가 말까지 그것의 국경을 볼 수있는 100 % 확장

#child1 { 
    overflow:auto; 
    min-height:150px; 
    border-bottom:1px solid #bbb; 
    background-color:#eee; 
    opacity:0.4; 
} 

#child2 { 
    height:100%; 
    background-color:white; 
}

다음과 같이

#parent { 
    overflow:auto; 
    margin: 0 auto; 
    margin-top:37px; 
    min-height: 100%; 
    width:875px; 
}

두 아이의 div의는 다음과 같이

부모입니다 page하지만 child2는 부모 div처럼 페이지 끝까지 확장되지 않습니다.

출처

2011-12-08 DemCodeLines

짐작 하시겠습니까? 다음과 같이하십시오. http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the -page-with-a-minimum-height – jmacinnes

아니요, 두 번째 자식 div가 부모 높이까지 완전히 늘어나지 않고 내가 입력 한 각 줄이 div를 확장합니다. 그 외에도 div는 확장되지 않습니다. – DemCodeLines

높이가 예상 한 것처럼 행동하지 않습니다. height: 100%을 지정하면 absolute 또는 relative 위치를 갖는 지정된 높이의 해당 요소의 첫 번째 부모에 대한 DOM을 조회하여 백분율을 계산합니다.

는 body 태그에 올 때 당신은 속일 수 있으므로 이런 식으로 뭔가가 있다면 :

<body> 
    <div style="height: 100%"> 
    </div> 
</body>

일부 브라우저/버전을 사용하면 페이지의 전체 높이를 고려하여 예상 한대로 작동합니다. 그러나 당신이 그보다 더 깊게 갈 때 그것은 작동하지 않을 것입니다.

페이지 하단에 div를 늘리는 데 사용하는 접근 방식입니다. 절대 위치 지정이 포함됩니다 (이 점에 대해 좋은 점은 브라우저 간 호환이며 자바 스크립트를 사용하지 않아도된다는 것입니다.)) :

여기

<div id="parent"> 
    <div id="childNorm"></div> 
    <div id="childStrech"></div> 
</div> 



#parent 
    { 
     position: absolute; 
     width: 1000px; 
     bottom: 0; 
     top: 0; 
     margin: auto; 
     background-color: black; 
    } 

    #childNorm 
    { 
    position: absolute; 
    width: 1000px; 
    top: 0; 
    height: 50px; 
    background-color: blue; 
    color: white; 
    } 

    #childStrech 
    { 
    position: absolute; 
    width: 1000px; 
    top: 50px; 
    bottom: 0; 
    background-color: red; 
    color: white; 
    }

데모에 대한 Jsfiddle입니다 : http://jsfiddle.net/t7ZpX/

트릭 :

것은 당신이 토륨을 스트레칭하는 요소가 발생 bottom: 0;에 넣어 다음 절대 위치 및 지정 페이지 하단. 요소를 배치하는 것에 대해 걱정할 필요가 있습니다.

출처

2011-12-08 04:12:47

예, 이것은 CSS의 성가신 일 중 하나입니다. min-height은 height을 계산할 때 "높이"로 간주되지 않습니다. http://jsfiddle.net/3raLu/3/을 참조하십시오. 하위 항목을 전체 높이로 만들려면 부모 div에 height: 100%이 있어야합니다. 또는 절대적으로 배치 할 수 있다면 작동합니다 : http://jsfiddle.net/3raLu/6/.

출처

2011-12-08 04:24:20 ScottS

하위 div가 상위 div로 확장되지 않음

답변

관련 문제