位置：首页>> 网络编程>> 网页设计>> css布局自适应高度方法（2）

css布局自适应高度方法（2）

作者：Fayetian　来源：蓝色理想　发布时间：2007-05-11 17:03:00　

标签：布局,自适应高度,css

流动布局

了解定宽布局之后，我尝试把这个方法用到动态布局中去。边栏仍然需要设置固定宽，很多浏览器不支持border:**％的属性。但是我门可以使中间栏目自适应。

CSS:

#container{
background-color:#0ff;
overflow:hidden;
margin:0 100px;
padding-right:150px; /* The width of the rail */
}
* html #container{
height:1％; /* So IE plays nice */
}
#content{
background-color:#0ff;
width:100％;
border-right:150px solid #f00;
margin-right:-150px;
float:left;
}
#rail{
background-color:#f00;
width:150px;
float:left;
margin-right:-150px;
}

3个栏目自适应布局
方法简单，不需要引用图片，没有BUG.

HTML:

<div id="container">
<div id="center">Center Column Content</div>
<div id="leftRail">Left<br /> Sidebar</div>
<div id="rightRail">Right Sidebar</div>
</div>

CSS:

body{
margin:0 100px;
padding:0 200px 0 150px;
}
#container{
background-color:#0ff;
float:left;
width:100％;
border-left:150px solid #0f0;
border-right:200px solid #f00;
margin-left:-150px;
margin-right:-200px;
display:inline; /* So IE plays nice */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:100％;
margin-right:-100％;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}

效果:

运行代码框<!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=gb2312" /><title>css</title><style type="text/css"></style></head><body><div id="container"> <div id="center">Center Column Content</div> <div id="leftRail">Left<br /> Sidebar<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left</div> <div id="rightRail">Right Sidebar</div></div></body></html>

第一页上一页 1

投稿

css布局自适应高度方法（2）

猜你喜欢