Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use min-height in CSS, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Minimum height setting in DIV+CSS min-height setting

The minimum height can be set to a minimum height of a BOX, and when its content is less, it can also keep the height of the BOX at a fixed height, and when it exceeds it, it automatically extends downwards, but so far, it is only supported by Opera and Mozilla, and supported by versions above IE7. How to use the minimum height reasonably and wisely on the existing basis (IE6 80-90%)?

Suppose there are two BOX (box1 and box2), and we both set the minimum height to 150PX.

The following is a reference to the CSS fragment:

Div.box1,div.box2 {width: 300px; min-height: 150px; background: # EEE;float: left;margin-right: 20px;}

The following is a reference to the HTML source code snippet:

The minimum height in IE6 is not kept as 150px

All IE supports keeping the minimum height to 150px

Currently, IE6 and some IE7 versions do not maintain the minimum height of 150px.

The solution

Provide css hack to set IE6 height

The following is a reference to the CSS fragment:

Div.box1,div.box2 {width: 300px; min-height: 150px; background: # EEE;float: left; margin-right: 20px;}

Div.box2 {* height:auto! important;*height:150px; min-height: 150px;}

The above is explained by setting box2 as follows:

* height:auto! important;*height:150px; to distinguish between IE6,IE7 and other browsers to achieve the minimum height of compatibility-you may need to know the difference between CSS hack and how different browsers write it.

From the above div+css example, I hope you can understand that each browser supports the minimum height (min-height:) method. Here, the css hack method is used to distinguish between ie6 and some ie7 that do not support the min-height method.

Thank you for reading this article carefully. I hope the article "how to use min-height in CSS" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.