我正在努力使我的網站的頁腳始終位于網頁的底部。無論網頁內容太小而無法占據整個屏幕，還是內容太多需要滾動，頁腳都應該始終位于屏幕底部......例如......我已經做了以下代碼可幫助演示該問題...問題是，雖然只有一個“占位符”div，但頁腳只是被推到其下方（它應該位于頁面的最底部，就像所有占位符都取消注釋時發生的情況一樣）。我怎樣才能實現這個目標？* { 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貢獻1798條經驗 獲得超3個贊
您需要添加的是
html, body{
height: 100%;
}
這應該可以解決問題
* {
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貢獻1802條經驗 獲得超5個贊
你唯一需要改變的是這個職位的價值。您正在尋找的正確位置是：固定
* {
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貢獻1757條經驗 獲得超8個贊
固定頁腳使用position: fixed
這是一個例子
* {
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貢獻1865條經驗 獲得超7個贊
我建議你去讀一下元素的位置。一切順利。一個很小的更改可以在這里幫助您，只需更改MyFooter類的位置即可。IE
.MyFooter?{
???position:?fixed;
}
九州編程
TA貢獻1785條經驗 獲得超4個贊
您可以使用bottom: 0和bottom: auto來解決此問題。
但首先，您應該將正文的高度設置為 100%，以便在有一個“占位符”時頁腳可以保留在頁面底部。
這是代碼，只有一個“占位符”：( 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 關注
- 269 瀏覽
添加回答
舉報
0/150
提交
取消