页面布局

最新推荐文章于 2024-11-15 11:24:51 发布

nathan_Shao

最新推荐文章于 2024-11-15 11:24:51 发布

阅读量287

点赞数

分类专栏： html 文章标签： html

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先，我们搭出大体的结构：

<body>
    <div id="container">
        <div id="header">Header Title</div>
        <div id="page" class="clearfix">
            <div id="left">Left Sider</div>
            <div id="content">Main Content</div>
            <div id="right">Right Sider</div>
        </div>
    <div id="footer">Footer Section</div>
    </div>
</body>

对于css:

1. reset: 去除html, body的margin, padding. 并且设置height为100%, 为的是方便以后子元素设置百分比。

2.我们还需要在div#container容器中设置一个"position:relative"以便于里面的元素进行绝对定位后不会跑了div#container容器。

3.div#page这个容器有一个很关键的设置，需要在这个容器上设置一个padding-bottom值，而且这个值要等于（或略大于）页脚div#footer的高度（height）值，但有一点需要注意，此处你千万不能使用margin-bottom来代替padding-bottom，不然会无法实现效果；

4.div#footer容器：div#footer容器必须设置一个固定高度，单位可以是px(或em)。div#footer还需要进行绝对定位，并且设置bottom:0；让div#footer固定在容器div#container的底部，这样就可以实现我们前面所说的效果，当内容只有一点时，div#footer固定在屏幕的底部（因为div#container设置了一个min-height:100%），当内容高度超过屏幕的高度，div#footer也固定在div#container底部，也就是固定在页面的底部。你也可以给div#footer加设一个"width:100%"，让他在整个页面上得到延伸；

CSS代码：

html,body {
margin: 0;
padding:0;
height: 100%;
}
#container {
min-height:100%;
height: auto !important;
height: 100%; /*IE6不识别min-height*/
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}

#page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;/*等于footer的高度*/
}

#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;/*脚部的高度*/
background: #6cf;
clear:both;
}
/*=======主体内容部分=======*/
#left {
width: 220px;
float: left;
margin-right: 20px;
background: lime;
}

#content {
background: orange;
float: left;
width: 480px;
margin-right: 20px;
}

#right{
background: green;
float: right;
width: 220px;
}