使页脚始终在底部
[英]Making Footer Always At Bottom
问题描述
I'm trying to make it so that the footer of my website is ALWAYS at the bottom of the web page.
我正在努力使我的网站的页脚始终位于网页的底部。 No matter if the web page content is too small to occupy the entire screen or if it has so much content that you need to scroll the footer should always be at the bottom of the screen... For example... I've made the following code to help demonstrate the issue...无论网页内容是否太小而无法占据整个屏幕，或者它的内容是否太多以至于您需要滚动页脚都应始终位于屏幕底部......例如......我已经做了以下代码可帮助演示该问题...
The issue is that while there is only one "Placeholder" div, the footer is simply pushed under it (it should be at the very bottom of the page like what happens when all Placeholders are uncommented).问题是，虽然只有一个“占位符”div，但页脚只是被推到它下面（它应该在页面的最底部，就像所有占位符都被取消注释时发生的那样）。
How can I achieve this?我怎样才能做到这一点？
* { 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>
6 个解决方案
解决方案1
0 2020-03-27 19:27:28
You need to adjust the body height.您需要调整身体高度。 Try adding height: 100vh;尝试添加height: 100vh; to your body CSS class.到你的body CSS 类。
解决方案2
0 已采纳 2020-03-27 19:28:25
All you need to add is您只需要添加
html, body{
height: 100%;
}
That should fix the problem那应该可以解决问题
* { 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>
解决方案3
0 2020-03-27 19:30:18
Fixed footer use position: fixed固定页脚使用position: fixed
Here is an example这是一个例子
* { 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>
解决方案4
0 2020-03-27 19:33:11
The only thing you had to change was the value of the position.你唯一需要改变的是职位的价值。 the correct one for what you are looking for is 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; } 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>
解决方案5
0 2020-03-27 20:02:09
解决方案6
0 2020-03-27 20:04:46
You can use bottom: 0 and bottom: auto to fix this.您可以使用bottom: 0和bottom: auto来解决这个问题。
But first, you should set the body's height to 100% so that the footer can stay in the bottom of the page when there is one "placeholder".但首先，您应该将正文的高度设置为 100%，以便在有一个“占位符”时页脚可以停留在页面底部。
Here is the code, with just one "placeholder": ( bottom: 0px; )这是代码，只有一个“占位符”：（ 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>
And here is the code, with all the "placeholders": ( bottom: auto; )这是代码，带有所有“占位符”：（ 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>
CodePen: https://codepen.io/marchmello/pen/xxGmqaY
代码笔： https ://codepen.io/marchmello/pen/xxGmqaY
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.