您的位置：首页 > 其它

footer一直在最底部不管内容多少内容多的时候挤下去

2017-05-03 12:30 316 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,html {
margin: 0;
padding: 0;
font: 12px/1.5 arial;
height:100%;
}
#content {
min-height:100%;
position: relative;
}
#main {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
padding: 10px 0;
background-color: #AAA;
width: 100%;
}
#footer h1 {
font: 20px/2 Arial;
margin:0;
padding:0 10px;
}
</style>
</head>
<body>
<div id="content">
<header>header</header>
<section>
<div id="main">
<h1>main</h1>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<br>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<h1>main</h1>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<br>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<h1>main</h1>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<br>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<h1>main</h1>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<br>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<h1>main</h1>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<br>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<h1>main</h1>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<br>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<h1>main</h1>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<br>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
</div>
</section>

<footer>
<div id="footer">
<h1>Footer</h1>
<div>
</footer>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 底部

相关文章推荐

新的分享

章节导航