Geek Answers Handbook

Dynamic div height with css

My HTML :

<!-- Content --> <div class="content"> <!-- Content left --> <div class="content-left"></div> <!-- Content center --> <div class="content-center"> </div> <!-- Content right --> <div class="content-right"></div> </div>

My CSS :

 .content { background-color: black; height: auto; margin: 80px auto 0px auto; min-height: 100px; padding: 10px 10px; width: 1200px; } .content-center { -khtml-box-shadow: 0px -3px 5px rgba(0,0,2,2); -moz-box-shadow: 0px -3px 5px rgba(0,0,2,2); -webkit-box-shadow: 0px -3px 5px rgba(0,0,2,2); background-color: #ffffff; border-left: 1px solid; border-right: 1px solid; border-color: #999999; box-shadow: 0px -3px 5px rgba(0,0,2,2); height : 900px; float: left; width : 800px; } .content-left { background-color: #fff; float: left; height: 300px; width: 190px; } .content-right { background-color: #fff; float: left; height: 300px; width: 190px; }

My problem is that the DIV with the "content" class does not have the same height with another element as the child of this tag. I want a div with class "content" to have dynamic height according to "content-center", "content-left" or "content-right". I use min-height and height: auto in the "content" class, but this is still not correct.

+4
source share
2 answers

Add overflow:auto to .content

 .content{ width: 1200px; min-height: 100px; height: auto; margin: 80px auto 0px auto; background-color: black; padding: 10px 10px; overflow:auto}

Demo

+17
source

Try the following:

 * { margin: 0; padding: 0; } html, body { height:100%; } .content { width: 1200px; min-height: 100px; height: auto; margin: 80px auto 0px auto; background-color: black; padding: 10px 10px; display:table; overflow:hidden; height:100%; }

Demo here

+1
source

More articles:


All Articles