完美解决网页内容随浏览器自适应布局，底部始终在底部
2013-08-08 17:23
381 查看
一直为这个问题困惑，挺常见的问题
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
body,html{height: 100%;margin: 0;padding: 0;}
.wrap{height: 100%;position: relative;overflow: hidden;}
header{height: 50px;background: #ccc;overflow: hidden}
section{background:#9acd32;height:100%;
padding-bottom:100000px;margin-bottom:-100000px;
border-top: 1px solid #666;border-bottom:1px solid #666;overflow: hidden; }
footer{height: 50px;background: blue;width:100%;position: absolute;bottom: 0;}
</style>
<body>
<div class="wrap">
<header>this is header</header>
<section>this is body</section>
<footer>copy right</footer>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 自适应布局，完美解决左右两边固定大小，中间内容适应大小。
- 网页内容设置有用的meta设置解决网页内容不能适应某些浏览器宽度的问题
- 浅谈网页的页脚始终置于浏览器底部的问题
- 解决安卓上底部使用fixed布局，键盘弹出后fixed部分的内容挡住form表单的情况
- FrontEnd 步步高升:header和footer始终显示在浏览器顶部和底部,中间区域自适应
- 借助cookie实现子网页修改父网页内容遇到的问题：同一个浏览器访问相同页面，会互相影响。 （已解决）
- html乱码原因与网页乱码解决方法，浏览器浏览网页内容出现乱码符合解决篇
- 完美解决 IOS系统safari5.0 浏览器页面布局iframe滚动栏失效问题
- 使iframe随内容（target到iframe的内容）改变而自适应高度，完美解决各种获取第一个demo高度后第二个高度不变情况
- 浏览器缩放，会导致布局打乱，解决方法？/一缩小网页布局就打乱了怎么办？
- 完美解决 IOS系统safari5.0 浏览器页面布局iframe滚动条失效问题
- 前端之-三列布局。顶部-底部-中间两侧固定。中间内容自适应
- 网页布局中页面内容不足一屏时页脚footer固定底部
- 移动端 顶部、底部和内容之间的小技巧 用flex布局来解决
- 三栏的网页布局，中间内容不确定高，问怎么让两边的背景始终与内容高度一致
- 部分浏览器会将网页某些内容默认设置为关键字的解决办法
- 如何将网页底部始终固定在页面底部而不是浏览器底部
- 网页布局中body中的元素与浏览器顶部有空隙的解决方法
- 完美解决iOS的WebView自适应内容高度问题
- 完美解决iOS的WebView自适应内容高度问题