유한 높이의 자식이 있더라도 부모 div의 높이는 0입니다.

유한 높이의 자식이 있더라도 부모 div의 높이는 0입니다.

---

다이어그램에 레이아웃이 표시된 웹 사이트가 있습니다. 본체는 구성 main container으로 포함하는, header, parent div및 footer. parent div상기 여러 포함 child div되어있다.

문제는 모든 높이 child div가 유한합니다. 그러나 parent div에는 하위 div 외에는 아무것도 포함되어 있지 않습니다. 모든 하위 div가 표시되지만 상위 div의 높이는 0으로 표시됩니다. 또한 향후 자식 수가 증가하면 실수가 발생할 수 있으므로 미리 지정된 값을 제공하여 부모 div의 높이를 고정하지 않습니다.

부모 div의 크기가 0으로 인한 문제는 바닥 글 div가 올라가고 부모 div의 내용과 충돌한다는 것입니다. 이 문제는 적절한 마진 상한을 제공하여 해결할 수 있지만 제가 찾고있는 해결책은 아닙니다.

누구든지 부모 div의 높이가 현재 자식 div의 높이에 따라 자동으로 변경되도록 나에게 어떤 방법을 제안 할 수 있습니까?

내 의심을 묻는 것이 명확하지 않은 경우 의견을 보내주십시오!

---

clearfix 클래스에 대한 케이스가있는 것 같습니다 .

그래서 나는 당신이 자식 div를 떠 다니고 있다고 생각하고 그것이 부모 div의 높이가 0 인 이유입니다. float를 사용할 때 부모는 자식의 높이에 적응하지 않습니다.

You can apply the 'clearfix' classes to the parent of the floating elements (of course you need to have it in your stylesheet) and it will add an insivible '.' at the end. Your parent will then have the correct height.

Note, it's cross platform, compatible IE6 +, Chrome, Safari, Firefox, you name it!

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

---

Try adding the following to your stylesheet:

#parentdiv:after { 
    content: " "; 
    display: block;
    clear: both;
} 

As Daedalus suggested in his comment, you're probably floating the child divs. If so, the line above fixes it.

The problem when you float things is that their parent element "ignores" them.

위의 줄은 (의사) 요소를 생성하고 #parentdiv에 삽입합니다.이 요소는 모든 부동 div를지나 아래로 푸시됩니다. 그런 다음 플로팅 된 자식을 무시하지만이 가상 요소를 무시하지 않는 부모 div는 해당 가상 요소를 무시하지 않습니다. 이제 가상 요소가 모든 부동 자식 아래에 있기 때문에 부모 div가 발생하거나 더 나은 방법은 부동 자식도 "포함"하는 것처럼 보입니다. 이것은 실제로 원하는 것입니다.

참조 URL : https://stackoverflow.com/questions/12540436/height-of-parent-div-is-zero-even-if-it-has-child-with-finite-heights