Question

I have a div with a height of 100% and a solid border. when i have too much content, it will display outside the div border.

how do i expand the div to the height of all the content inside the border instead of just 100% of the screen size?

the height:100% seems to be measuring the screen height but not the content inside of it.

<style>
#container{
    height:100%;
    width:100px;
    border:1px solid black;
}
</style>
<div id="container">

link to problem sample page

Answer 1

Such a problem can be easily solved using the elusive clearfix! First off, remove all those height:100%; declarations you have for your #container, they’re not needed, and try this in your CSS:

#container:before, #container:after {
  display: table;
  content: "";
  zoom: 1;
}

#container:after {
  clear: both;
}