如何將頁腳設置爲頁面底部？

代碼：如何將頁腳設置爲頁面底部？

<!DOCTYPE html> 
<html> 
<head> 
<title>Slide-Up Dialogue Box</title> 
<style type="text/css"> 
body { 
margin: 0; 
padding: 0; 
height: 100%; 
} 
#container { 
min-height: 100%; 
position: relative; 
} 
#header { 
background: #ff0; 
padding: 10px; 
} 
#body { 
padding: 10px; 
padding-bottom: 60px; 
} 
#footer { 
position: absolute; 
bottom: 0; 
width: 100%; 
height: 30px; 
background: #6cf; 
} 
</style> 
</head> 
<body> 
<div id="container"> 
<div id="header"></div> 
<div id="body"></div> 
<div id="footer"> 
Who is Online? 
</div> 
</div> 
</body> 
</html>

我怎樣才能把頁腳在頁面的底部？我嘗試過填充，底部和邊距的嘗試，但迄今爲止我還沒有取得很大的成功。有人能告訴我如何將頁腳放在頁面底部嗎？謝謝

來源

2015-09-26 B.Liu

嘗試添加位置：固定爲頁腳。 – sinisake

你可以這樣做一個先生：

body { 
margin: 0; 
padding: 0; 
height: 100%; 
} 
#container { 
min-height: 100%; 
position: relative; 
} 
#header { 
background: #ff0; 
padding: 10px; 
} 
#body { 
padding: 10px; 
padding-bottom: 60px; 
} 
#footer { 
position: fixed;; 
bottom: 0; 
width: 100%; 
height: 30px; 
background: #6cf; 
text-align:center; 
}

HERE MY CODE

來源

2015-09-26 10:15:29

您需要將body高度設置爲100％。目前，該機構僅涵蓋您所擁有的內容。沒有爲身體元素設置明確的高度。

由於身體需要計算父元素的100％，因此也應將html高度設置爲100％。

html, 
 
body { 
 
    height: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Slide-Up Dialogue Box</title> 
 
    <style type="text/css"> 
 
    body { 
 
     margin: 0; 
 
     padding: 0; 
 
     height: 100%; 
 
    } 
 
    #container { 
 
     min-height: 100%; 
 
     position: relative; 
 
    } 
 
    #header { 
 
     background: #ff0; 
 
     padding: 10px; 
 
    } 
 
    #body { 
 
     padding: 10px; 
 
     padding-bottom: 60px; 
 
    } 
 
    #footer { 
 
     position: absolute; 
 
     bottom: 0; 
 
     width: 100%; 
 
     height: 30px; 
 
     background: #6cf; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <div id="header"></div> 
 
    <div id="body"></div> 
 
    <div id="footer"> 
 
     Who is Online? 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-09-26 10:12:38

如果你的目標是「修理」你的元素在屏幕的底部，設置：

position: fixed; 
 
bottom: 0;

在一個側面說明，這可能是一個好主意，你開始學習HTML5元素，如「尾」，而不是使用div的一切。另請注意，身份證是獨一無二的，造型最適用於大衆/一般（使用班級）。

來源

2015-09-26 10:17:12 Arman

如何將頁腳設置爲頁面底部？

回答

相關問題