使页脚正确地粘在页底
使页脚正确地粘在页底
<div id="container"> <div id="body"></div> <div id="footer"></div></div>
body {
margin: 0;
padding: 0;
height: 100%;}html {
margin: 0;
padding: 0;
height: 100%;}#container {
width: 674px;
min-height: 100%;
height: 100%;
position: relative;
margin: 0 auto;}#body {
width: 616px;
padding: 5px 14px 5px 14px;
margin: 0 auto;
padding-bottom: 20px;}#footer {
position: absolute;
bottom: 0;
width: 644px;
height: 20px;
margin: 0 auto;}
当年话下浏览 363回答 3
3回答
-
守着星空守着你
最简单的解决办法是使用min-height在<html>标记并定位<footer>带着position:absolute;演示: 小提琴所以片段：html { position: relative; min-height: 100%;}body { margin: 0 0 100px; /* bottom = footer height */ padding: 25px;}footer { background-color: orange; position: absolute; left: 0; bottom: 0; height: 100px; width: 100%; overflow: hidden;}<article> <!-- or <div class="container">, etc. --> <h1>James Dean CSS Sticky Footer</h1> <p>Blah blah blah blah</p> <p>More blah blah blah</p></article><footer> <h1>Footer Content</h1></footer> -
万千封印
为何不使用：{ position: fixed; bottom: 0 } ?
随时随地看视频慕课网APP
Html/CSS