How to make div expandable with content while setting min height property as well in CSS

Question

I have created a master page in asp.net which dont have any server side control as of now. I used div every where rather than table. There is not even a single Table right now in the page. Now When i tried to use that master page on other pages I found that div section that was holding the body content of the page is not expanding as the content is growing and content is overflowing on other sections.

Do we have any way to make div expandable with keeping minimum height fixed. i.e. If the content is less than the minimum height set than regions should be shown with minimum height that was set else if content is more than minimum height then height starts growing with the page.

How can we do this. This is my site where i want to make make about us and contact us page to be expandable.

You can find the css named style.css within the site.

Answer 1

By default a div will expand beyond the size specified using the min-height CSS property. My guess is that you are looking at the wrong thing as the cause of this issue. For your information IE6 I believe ignores the min-height property and will shrink to its content size even when the content size is smaller than the specified min-height.

---

UPDATE:

When you detect a browser with the problem mentioned above (i.e Internet Explorer 6) use JavaScript to measure the height of the wrapper DIV using it's offsetHeight and then subtract that value from what the min-height should be. If the value is positive then set the style.height value to the min height value.

Answer 2

Try this css:

div {
    min-height: 100px;
    overflow: hidden;
}

This overflow: hidden is a css-hack so to say. Maybe it helps you out here...