Have Geek Brain

What's the best and most efficient way for cross-browser min-height?

for #main-content

I don't want to give any correction height because the content can be long and short, but if the content is short it should take up the minimum height 500px

.

I need compatibility across all browsers.

Is any w3c valid and cross-browser way without using! important because I read! important not to use

Finally, don't use! an important declaration if you tried everything else first and kept in mind any flaws. If you're using this, it probably makes sense, if possible, to comment in your CSS next to any styles you override to ensure better maintainability of your code.

I tried to cover all the essentials with regard to use! an important declaration, so please offer comments if you think theres everything Ive missed, or if Ive misunderstood anything and I will be happy to make any necessary corrections.

http://www.impressivewebs.com/everything-you-need-to-know-about-the-important-css-declaration/

+2


a source to share


3 answers


min-height is supported in every major browser except IE6 (see QuirksMode ).

In IE6, an element will expand to contain its content, even if it has a fixed height; height in IE6 is the minimum height.



So the cross-browser minimum height declaration would look like this:

#main-content {
    min-height: 500px;
}
* html #main-content { /* target IE6 */
    height: 500px;
}
+2


a source


Here is one of them:

#main-content {  
    min-height:500px;  
    height:auto !important;  
    height:500px;  
}


Also see this for IE:

Cross-Browser CSS Min-Height

+1


a source


min-height: 100px; / * sets the min-height value for all standards-compliant browsers * /

min-height doesn't work for IE, so you can use: -

height: expression (this.scrollHeight <100? "100px": "auto"); / * sets the minimum height for IE * /

0


a source






More articles:


All Articles