使頁腳正確地粘在頁底我試圖讓我的頁腳(只是一個div，其中有一行文本)在屏幕底部，如果內容沒有一直走到底部，或者在內容需要滾動條時位于內容的底部。如果內容不需要滾動條，它可以很好地工作，但是當內容太長時，頁腳仍然位于相同的位置，就在內容的頂部。我的基本部門結構是：<div id="container">
<div id="body"></div>
<div id="footer"></div></div>我相應的CSS(略為刪減)：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;}
3 回答
交互式愛情
TA貢獻1712條經驗 獲得超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>
添加回答
舉報
0/150
提交
取消