品优网络 十六年(2003-2018)专注
当前位置:网站首页 >> 宁波网站制作
更小高度**页脚保持在底部的布局方法
日期:2014-12-25 作者:admin 来源: 浏览次数:0 网友评论 0

企业网站推广1

有时候,我们用CSS创立一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局更下方是一个比拟头疼的事。我看过一些利用尽对定位的例子,但总感到不是那么完善,经过一下午的研究总结出一个利用负值外补丁的方法来实现这个后果的方法,兼容IE5.0+,Opera 8.5+,Firefox 1.5+。下面我们看步骤:

1、为了让浏览器辨认高度**我们需要先给 html 和 body 加上一个高度值,同时清除所有元素的 margin 和 padding。顺便提一下,经过我的测试,html 和 body 的 height: **; 即是全部浏览器窗口的总高度,无论内容是否超过一屏。而它们下一级子元素 height: **; 则即是前几屏的高度。如何,是不是有点不好懂得?


* {
margin: 0;
padding: 0;
}
html, body {
height: **;
}

2、由于上面提到的标题,所认为了让布局自适应高度,我们要加上 min-height: **;,固然IE不支撑这个属性但是IE的 height: **; 有同样的作用:
#wrapper {
min-height: **;
}
* html #wrapper {
height: **;
}

这样,一个更简略的更小高度满一屏的自适应布局就做好了。为了便于查看,我加了一些宽度和背风景润饰,如下:
* {
margin: 0;
padding: 0;
}
html, body {
height: **;
text-align: center;
font: 12px/1.4 Verdana, sans-serif;
background: #f00;
}
#wrapper {
width: 770px;
min-height: **;
background: #ccc;
margin: auto;
text-align: left;
}
* html #wrapper {
height: **;
}

更小高度**页脚保持在底部的布局方法,希望对您有参考价值。

企业网站推广2

查看更多宁波网站制作布局更小高度

宁波网站建设 (http://www.c36.cn/) 版权与免责声明
    1、凡本网注明“来源:宁波品优网络”字样的所有作品,版权均属于浙江省宁波海曙品优网络技术有限公司,如需转载、摘编或利用其它方式使用上述作品,请与本网联系。
    2、凡本网注明“来源:XXX(非宁波品优网络)”的作品,均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。宁波网站建设的转载仅为信息的广泛传播,如有侵权请及时告之删除。
返回:宁波网站制作