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

In this issue, the editor will bring you about the minimum and highly wonderful use of DIV CSS web page layout. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Do you know about the use of the minimum height (min-height) in the DIV CSS page layout? here we share that the minimum height can be set to a minimum height of BOX, but so far, only Opera and Mozilla support it, and IE7 also supports it at the beginning, but IE7 is in the testing stage.

The magic use of minimum height (min-height) in DIV CSS web page layout

The minimum height can be set to a minimum height of a BOX, and when its content is small, it can also keep the height of the BOX fixed, and if it exceeds it, it automatically extends downwards, but so far, only Opera and Mozilla support it, and IE7 has also supported it at first, but IE7 is in the testing stage, and it may take a long time for the official version to be released to popularity, unless MS binds it to an operating system and how to build on the existing basis (IE680-90%). Reasonable and clever use of the minimum height?

◆ assumes that there are two BOX, and we need its minimum height to be 150PX.

CSS

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

Xhtml

If you don't keep the minimum height in IE to the minimum height of 150px, you can set the minimum height of a BOX. When there is less content, you can also keep the height of BOX to a certain level.

The current effect does not maintain the minimum height of 150px in IE.

The solution

◆ sets a height for IE

ExampleSourceCode

* htmldiv.box1,*htmldiv.box2 {height:150px;}

Another solution to ◆ is to use CSS's attribute selector (AttributeSelectors)

ExampleSourceCode

Div.box1,div.box2 {.height: 150px;} / * IE relies on this to maintain the minimum height. Beyond that, it automatically extends down * / div [class] .box1, div [class] .box2 {height:auto;} / * DIV object with class selector (class) attribute * /

IE is naturally not supported, Opera and Mozilla support, read this height. Applications: search, articles and other pages (do not use 100% height, when the content found is less, the page is not too short.

The above is the minimum height of the DIV CSS page layout shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.