Home > Web Front-end > CSS Tutorial > DIV CSS web page layout The wonderful use of minimum height (min-height)_Experience exchange

DIV CSS web page layout The wonderful use of minimum height (min-height)_Experience exchange

WBOY
Release: 2016-05-16 12:04:17
Original
2476 people have browsed it

Assuming there are two BOX, 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

The minimum height is not maintained at 150px in IE

The minimum height can be set to the minimum height of a BOX. Even when the content is small, the height of the BOX can be kept constant

The current effect is that the minimum height is not maintained at 150px in IE.
The solution
Set a height for IE
* html div.box1,* html div.box2{height: 150px;}
The solution for wellstyled.com is to use CSS attribute selection Attribute Selectors
div.box1,div.box2{......height: 150px;}
/* IE relies on this to maintain the minimum height, and it will automatically extend downwards if it exceeds it*/
div[class].box1,div[class].box2{height: auto;}
/* DIV object with class selector (class) attribute*/
IE naturally does not support it, Opera and Mozilla support, reading this height. Applicable occasions: search, article and other pages (100% height is not used, so that when the content found is less, the page will not be too short.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template