网站建设之网页布局小技巧

2022-06-09 分类：网站建设

网站建设之网页布局小技巧:让页眉始终保持底部的方法

有时候，我们用网页创建一个高度自适应布局，如何保证页眉（footer）在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事。我看过一些利用绝对定位的例子，但总感觉不是那么好，经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法，兼容IE5.0+，Opera 8.5+，Firefox 1.5+。下面我们看步骤：

　　1、为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值，同时清除所有元素的 margin 和 padding。顺便提一下，经过我的测试，html 和 body 的 height: 100%; 等于整个浏览器窗口的总高度，无论内容是否超过一屏。而它们下一级子元素 height: 100%; 则等于第一屏的高度。如何，是不是有点不好理解？

　　* {margin: 0;padding: 0;}

　　html, body {height: 100%;}

　　2、因为上面提到的问题，所以为了让布局自适应高度，我们要加上 min-height: 100%;，虽然IE不支持这个属性但是IE的 height: 100%; 有同样的作用：

　　#wrapper {min-height: 100%;}

　　* html #wrapper {height: 100%;}

　　这样，一个最简单的最小高度满一屏的自适应布局就做好了。为了便于查看，我加了一些宽度和背景色修饰，如下：

　　* {margin: 0;padding: 0;}

　　html, body {height: 100%;text-align: center;font: 12px/1.4 Verdana, sans-serif;background: #f00;}

　　#wrapper {width: 770px;min-height: 100%;background: #ccc;margin: auto;text-align: left;}

html #wrapper {height: 100%;}

网站建设时，网页布局是很重要的内容。

当前文章：网站建设之网页布局小技巧
URL分享：https://www.cdcxhl.com/news27/165377.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站建设等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容