FireFox Logo

Setting a Minimum Height to a Div or HTML element in ALL BROWSERS.



So you wanna set a minimum height on a Div tag that works in all browsers ehh? Well no need to worry. Here is the easy way to do it and it works in all browsers.


Share

First things first. Use the "min-height" in your css like this:

.myDiver{
     min-height:100px;
}

NEXT! Set the regular height to "auto" using the "!important" tag.

.myDiver{
     min-height:100px;
     height:auto !important;
}

LAST! Set the regular height (again) but to the minimum height. ;-)

.myDiver{
     min-height:100px;
     height:auto !important;
     height:100px;
}

This will keep the div at 100px; and if the content inside of it extends beyond 100px, it will grow. This is true in ALL BROWSERS! Check out this example below:

sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd