利用负值的margin-bottom固定页脚

以下面为例：

<body>
　　<div class="main">主体内容<div>
　　<div class="footer">footer</div>
</body>

1、首先添加，

html,body{
　　height:100%;
}


使页面充满整个浏览器窗口

2、为Logo以及登陆、注册表单的父容器main添加

.main{
    min-height:100%;
    height:100%;
}

min-height表示如果内容高度大于设定值，高度随内容扩张，小于设定值，则为设定值，本例为100%，即整个浏览器窗口。
将main容器的height值设为100%，充满整个浏览器窗口，则footer需要下拉进度条才能查看。

3、main容器内子容器应用vetical-align:middle就可以保证无论浏览器高度多高，内容始终垂直居中

4、此时只需要将藏在进度条下的footer固定在底部就完成了页面的设计
假设footer的高度为50px,为main添加样式

.main{
    margin-bottom:-50px;
}

上述代码将main容器的底部外边距“向上拉了”50个像素，让footer始终保持在浏览器的底部。

以上两个设计的关键点是：
1、主体内容始终保持垂直居中
2、页脚始终保持在浏览器底部

Ps:关于如何使用vetical-align:middle垂直居中块级元素请看下一篇

posted @ 2016-01-05 16:21  olaf  阅读(306)  评论(0)  编辑  收藏  举报