我正在努力使我的網(wǎng)站的頁腳始終位于網(wǎng)頁的底部。無論網(wǎng)頁內(nèi)容太小而無法占據(jù)整個(gè)屏幕，還是內(nèi)容太多需要滾動(dòng)，頁腳都應(yīng)該始終位于屏幕底部......例如......我已經(jīng)做了以下代碼可幫助演示該問題...問題是，雖然只有一個(gè)“占位符”div，但頁腳只是被推到其下方（它應(yīng)該位于頁面的最底部，就像所有占位符都取消注釋時(shí)發(fā)生的情況一樣）。我怎樣才能實(shí)現(xiàn)這個(gè)目標(biāo)？* { margin: 0; padding: 0;}body { position: relative; min-height: 100%;}.Placeholder{ background-color: blue; height: 100px; width: 100%;}.MainContainer { width: 100%; padding: 0; margin: 0; background-color: green;}.MyFooter { position: absolute; bottom: 0; width: 100%; background-color: red; padding: 0; margin: 0;}<html> <head> </head> <body> <div class='Header'>Header</div> <div class="MainContainer"> <div class='Placeholder'></div> <!-- Uncomment these to populate the container. <div class='Placeholder'></div> <div class='Placeholder'></div> <div class='Placeholder'></div> <div class='Placeholder'></div> !--> </div> <div class="MyFooter"> This is my footer, it should always be at the bottom of the page. </div> </body></html>
5 回答
呼如林
TA貢獻(xiàn)1798條經(jīng)驗(yàn) 獲得超3個(gè)贊
您需要添加的是
html, body{
height: 100%;
}
這應(yīng)該可以解決問題
* {
margin: 0;
padding: 0;
}
body {
position: relative;
min-height: 100%;
}
html, body{
height: 100%;
}
.Placeholder
{
background-color: blue;
height: 100px;
width: 100%;
}
.MainContainer {
width: 100%;
padding: 0;
margin: 0;
background-color: green;
}
.MyFooter {
position: absolute;
bottom: 0;
width: 100%;
background-color: red;
padding: 0;
margin: 0;
}
<html>
<head>
</head>
<body>
<div class='Header'>Header</div>
<div class="MainContainer">
<div class='Placeholder'></div>
<!-- Uncomment these to populate the container.
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
!-->
</div>
<div class="MyFooter">
This is my footer, it should always be at the bottom of the page.
</div>
</body>
</html>
慕后森
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊
你唯一需要改變的是這個(gè)職位的價(jià)值。您正在尋找的正確位置是：固定
* {
margin: 0;
padding: 0;
}
body {
position: relative;
min-height: 100%;
}
.Placeholder
{
background-color: blue;
height: 100px;
width: 100%;
}
.MainContainer {
width: 100%;
padding: 0;
margin: 0;
background-color: green;
}
footer {
background-color: red;
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
}
<html>
<head>
</head>
<body>
<div class='Header'>Header</div>
<div class="MainContainer">
<div class='Placeholder'></div>
<!-- Uncomment these to populate the container.
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
!-->
</div>
<footer>
This is my footer, it should always be at the bottom of the page.
</footer>
</body>
</html>
陪伴而非守候
TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個(gè)贊
固定頁腳使用position: fixed
這是一個(gè)例子
* {
margin: 0;
padding: 0;
}
body {
position: relative;
min-height: 100%;
}
.Placeholder
{
background-color: blue;
height: 100px;
width: 100%;
}
.MainContainer {
width: 100%;
padding: 0;
margin: 0;
background-color: green;
}
.MyFooter {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
width: 100%;
background-color: red;
padding: 0;
margin: 0;
}
<html>
<head>
</head>
<body>
<div class='Header'>Header</div>
<div class="MainContainer">
<div class='Placeholder'></div>
<!-- Uncomment these to populate the container.
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
!-->
</div>
<div class="MyFooter">
This is my footer, it should always be at the bottom of the page.
</div>
</body>
</html>
鴻蒙傳說
TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊
我建議你去讀一下元素的位置。一切順利。一個(gè)很小的更改可以在這里幫助您，只需更改MyFooter類的位置即可。IE
.MyFooter?{
???position:?fixed;
}
九州編程
TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超4個(gè)贊
您可以使用bottom: 0和bottom: auto來解決此問題。
但首先，您應(yīng)該將正文的高度設(shè)置為 100%，以便在有一個(gè)“占位符”時(shí)頁腳可以保留在頁面底部。
這是代碼，只有一個(gè)“占位符”：( bottom: 0px;)
let h = window.innerHeight;
var x = document.getElementsByTagName("BODY")[0];
x.style = "height: " + h + "px;";
window.addEventListener('resize', function(event){
x = document.getElementsByTagName("BODY")[0];
h = window.innerHeight;
x.style = "height: " + h + "px;";
});
if(document.getElementById('main').offsetHeight > h) {
document.getElementById('footer').style = "bottom: auto;";
}
* {
margin: 0;
padding: 0;
}
.Placeholder
{
background-color: blue;
height: 100px;
width: 100%;
}
.MainContainer {
width: 100%;
padding: 0;
margin: 0;
background-color: green;
}
.MyFooter {
position: absolute;
bottom: 0px;
width: 100%;
background-color: red;
padding: 0;
margin: 0;
}
<body>
<div class='Header'>Header</div>
<div class="MainContainer" id="main">
<div class='Placeholder'></div>
</div>
<div class="MyFooter" id="footer">
This is my footer, it should always be at the bottom of the page.
</div>
</body>
這是代碼，包含所有“占位符”：( bottom: auto;)
let h = window.innerHeight;
var x = document.getElementsByTagName("BODY")[0];
x.style = "height: " + h + "px;";
window.addEventListener('resize', function(event){
x = document.getElementsByTagName("BODY")[0];
h = window.innerHeight;
x.style = "height: " + h + "px;";
});
if(document.getElementById('main').offsetHeight > h) {
document.getElementById('footer').style = "bottom: auto;";
}
* {
margin: 0;
padding: 0;
}
.Placeholder
{
background-color: blue;
height: 100px;
width: 100%;
}
.MainContainer {
width: 100%;
padding: 0;
margin: 0;
background-color: green;
}
.MyFooter {
position: absolute;
bottom: 0px;
width: 100%;
background-color: red;
padding: 0;
margin: 0;
}
<body>
<div class='Header'>Header</div>
<div class="MainContainer" id="main">
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
</div>
<div class="MyFooter" id="footer">
This is my footer, it should always be at the bottom of the page.
</div>
</body>
- 5 回答
- 0 關(guān)注
- 251 瀏覽
添加回答
舉報(bào)
0/150
提交
取消