使页脚始终位于底部
我正在努力使我的网站的页脚始终位于网页的底部。无论网页内容太小而无法占据整个屏幕，还是内容太多需要滚动，页脚都应该始终位于屏幕底部......例如......我已经做了以下代码可帮助演示该问题...
问题是，虽然只有一个“占位符”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>
PIPIONE浏览 177回答 5
5回答
-
呼如林
您需要添加的是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> -
慕后森
你唯一需要改变的是这个职位的价值。您正在寻找的正确位置是：固定* { 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> -
陪伴而非守候
固定页脚使用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> -
鸿蒙传说
我建议你去读一下元素的位置。一切顺利。一个很小的更改可以在这里帮助您，只需更改MyFooter类的位置即可。IE.MyFooter { position: fixed; } -
九州编程
您可以使用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>
随时随地看视频慕课网APP
相关分类
Html5