min-height: fixed !optimized;
July 25th, 2005
- Category:
- CSS,
- Web Development
Safari 1.0 does not support that pretty useful property min-height.
Therefore Dave Shea came along and presented a tricky solution of how to implement min-height for Safari. But there is one little thing I did not like about that solution: the need for two elements in the markup to make it work.
What if I cannot easily change the markup, but have to to employ the min-height property, for example for an existing website?
Pseudo-element selector :before to the rescue! So here's a solution – based on Dave Shea's method – that works without the need for some extra markup:
/* EOMB */
.box {
padding: 99px 0 0;
min-height: 1px; /* : Opera */
}
.box:before { /* Safari 1.0 min-height */
display: block;
margin: -99px 0 0;
content: " ";
}
/* IE/Win */
.box {
padding-top: 0;
height: 100px; /* similar to min-height property in IE/Win */
}
min-height: fixed !optimized; demo
I have tested this technique in Firefox 1.0, Safari 1.0, Netscape 7.1, Mozilla 1.3, Internet Explorer 6 and Opera 7.23/8.