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

aizhe1517

于 2016-01-05 16:21:00 发布

阅读量157

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/olafff/p/5102755.html

本文介绍了一种使网页内容在浏览器窗口中垂直居中，并保持页脚始终位于底部的设计方法。通过调整HTML和CSS属性，如height、min-height和vertical-align，确保了页面元素的正确布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下面为例：

<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垂直居中块级元素请看下一篇

转载于:https://www.cnblogs.com/olafff/p/5102755.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。