css layout/fixed03: 2 column left navigation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSSeasy.com example page</title>
<style type="text/css">
/*
You are allowed to do whatever you want with this layout. Though I would be pleased if you placed a link on your site to csseasy.com or to profit42.com (best "blog about hacking" ever). Donations are also welcome: paypal@profit42.com (or follow the donation button on csseasy.com)
*/
body {
width:750px;
margin:0 auto;
margin-top:30px;
}
/* ----- HEADER ----- */
#header {
width:750px;
height:150px;
background-color:#333333;
}
/* FAUX LAYOUT WRAPPER */ 可以不要
/*
This div is optional: When you delete it the navigation bar and the content block won't have the same size when one of them has a larger height then the other. I recommend you to leave this faux layout wrapper here.
IMPORTANT: In order to make this work you have to download http://csseasy.com/layouts/fixed/background_3.gif (copy past in your address bar) and place it in the same folder as this html file. DON'T HOTLINK to this file.
*/
#wrapper{
width:750px;
background:url(background_3.gif) repeat-y; /* WARNING: IF YOU CHANGE THE COLORS OF THE LAYOUT YOU HAVE TO CHANGE THIS IMAGE! */
overflow:auto; /* USE FIREFOX GUYS! WE ONLY NEED THIS LINE BECAUSE INTERNET EXPLODER ISN'T READING CODE PROPERLY */
margin-top:10px;
}
/* ----- NAVIGATION ----- */
#navigation {
width:200px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background-color:#333333;
float:left; 让这个div浮动到左边，后面的块元素可以在这行继续显示,不要float：left，后面的块元素会另起行。
}
/* ----- MAIN CONTENT ----- */
#content {
margin-left:210px;
width:540px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background-color:#333333;
margin-top:10px;
}
/* ----- FOOTER ----- */
#footer {
margin-top:10px;
width:750px;
height:100px;
background-color:#333333;
}
</style>
</head>
<body>
<div >
</div>
<div > 这个可以不要
<div >
</div>
<div >
</div>
</div>
<div >
</div>
</body>
</html>显示如下：
http://www.csseasy.com/layouts/fixed/2column_left.html
设置了Min-height为什么还要设置
height:auto !important; /* for modern browsers */ height:500px; /* for IE5.x and IE6 */
Cross-Browser Min Height
div {
min-height:500px;
height:auto!important;
height:500px;
}
This works because (thankfully?) IE treats "height" how "min-height" is supposed to be treated.
ie对待“height”，就像现代浏览器对待“min-heigh"那样。
First, let's define the difference between height and min-height. Height is a fixed height. "I want it this height, darn it! This height -- not more not less." Min-height is, as the name indicates, a fixed minimum height. "I want it to be at least this height, darn it! This height, possibly more, but certainly not less." An !important declaration can be likened to an override. It allows you to declare an overriding property, which will be considered taking precedence even if there are other rules with the same specificity declaring something else.
Standards compliant browsers (which now, for this exercise, also includes IE7) behave just that way. IE6, on the other hand, does not understand min-height at all. And, furthermore, it treats height as if it were min-height. Additionally, IE6 ignores !important.
Now, let's look at each declaration individually.
min-height: 500px;
This declares the minimum desired height to 500px.
height: auto !important;
Let the actual final height auto-adjust (while obeying the declared min-height, of course). Even though auto is the default for any element's height, we want to declare it because of the following rule.
height: 500px;
Declare the fixed height as 500px.
Now, why does this work? Well, standards compliant browsers will see:
min-height: 500px;
height: auto;
IE6, on the other hand, due to ignoring !important and not understanding min-height, will see:
height: 500px;
Due to the incorrect implementation in IE6, in all browsers we now get an element which is at least 500px tall, but will stretch to accommodate whatever additional height is necessary.
是为了与ie兼容，可以不要。
为什么navigation和content有相同的margin-top；我们只设置了content的margin-top;
下面的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
#content1
{
float:left;
width:300px;
height:200px;
background:lime;
}
#content2
{
width:350px;
height:200px;
background:red;
margin-left:320px;
margin-top:50px;
}
</style>
</head>
<body>
<div ></div>
<div ></div>
</body>
</html>我们可以看到第一个浮动的div与第二个div有相同的margin-top：50px;
如果我们再设置第一个div的margin-top:100px;
第一个div的margin-top变成了:150px; 第二个还是50。
- 上一篇 »CSS3多列布局与伸缩布局
- 下一篇 »CSS + DIV 居中写法，不定宽高