试图让 .footer 留在网页的最底部答案

【问题标题】：Trying to get .footer to remain at the very bottom of webpage试图让 .footer 留在网页的最底部
【发布时间】：2019-10-04 19:46:06
【问题描述】：

我的 HTML 如下所示，但没有内容，因为仅需要以下内容来回答我的问题：

<html> 
  <body>
   <div class="container">
      <div class="socialmedia"></div>
      <div class="navbar"></div>
      <div class="mainbody></div>
      <div class="footer"></div>
   </div>
  </body>
</html>

我一直在尝试让页脚保留在网页底部的 .mainbody 下方。但问题是，页脚似乎只位于我的窗口底部，而不是位于网页底部，当我有很多内容时，它可能会延伸到我的实际窗口下方。现在，我将上面的所有 div 设置为“绝对”位置；以及 html 和 body 的样式如下：

html, body{
height:100%;
margin:0;
padding:0;
}
html {  background: url(/img/multiblock.png)repeat center center fixed; }

}

现在，让页脚保持在网页底部的唯一方法是设置 top:-3998px（或者我最大窗口的高度）。显然，一旦网页上有足够的内容以将其扩展超过该高度，这将不起作用。如果我将位置设置为相对，它会出现在我整个网页的顶部，而当绝对定位时，它只会出现在可视窗口的底部。您可以查看http://www.edmuncovered.com 的网站以了解我的意思或查看其余代码。我的网站的部分内容包括每天左右添加内容，所以我想确保网页可以随着添加的内容而增加高度，但格式保持不变并且页脚显然保持在底部。有什么想法吗？

【问题讨论】：

标签： html css css-position footer

【解决方案1】：

我想这就是你需要的......

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

【讨论】：

感谢 rousseauo...我最终发现我必须摆脱几乎所有 div 的定位并再次从头开始工作才能找到真正需要绝对定位的 div（最终只作为页脚，将其余部分保留为静态或相对），现在可以使用了！

【解决方案2】：

你可以试试这样的：

CSS：

.socialmedia, .navbar, .mainbody, .footer
{
border: 1px solid grey;
margin-top: 5px; 
width: 800px;
}
.socialmedia
{
height: 20px;
}
.mainbody
{
min-height: 980px;
}
.footer
{
height: 25px;
}

HTML：

<div class="container">
    <div class="socialmedia">Social Media</div>
    <div class="navbar">Navbar</div>
    <div class="mainbody">Mainbody</div>
    <div class="footer">Footer</div>
</div>

正在工作的 jsFiddle： http://jsfiddle.net/LrfXr/

【讨论】：

您可以将 '.mainbody {min-height: 980px;}' 设置为您想要的最小高度

【解决方案3】：

我假设这是一个类似于这里的问题：How to Stop Sticky Footer at Content DIV

其中有一些很好的答案。

该页面上的链接：
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
http://twitter.github.io/bootstrap/examples/sticky-footer.html

基本上，您正在寻找一个将自身附加到视口底部的页脚，但如果内容将其推离视口，它也会扩展。 Martin Bean 和 Ryan Fait 有最好的方法。 bootstrap 的方法也是这种方法的一种变体。

狩猎愉快。

【讨论】：

【解决方案4】：

这是jsFiddle 链接。以下是您的 css 和 html 代码：

HTML 代码

<div class="container">
      <div class="socialmedia">Social Media</div>
      <div class="navbar">Navbar</div>
    <div class="mainbody">Mainbody</br>Mainbody</br>Mainbody</br>Mainbody</div>
      <div class="footer">Footer</div>
   </div>

CSS

*{
margin:0;
padding:0;
}
body {  
    background-color:#E4E2E2; 
    color:#fff;
}
.container {
   min-height:100%;
   /*position:relative;*/
}
.socialmedia {
    background-color:#186301;
    padding:10px;
}
.navbar {
   background:#A60206;
   padding:10px;
   min-height:30px;
}
.mainbody {
   padding:20px;
   background-color:#6D0594;
}
.footer {
   position:absolute;
   bottom:0;
   padding:2%;
   background-color:#000;
   width:96%;
}

【讨论】：

【解决方案5】：

这对我有用： http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

简而言之，使用这个：

CSS

* {
   margin: 0;
}
   html, body {
   height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}
.footer, .push {
  height: 4em;
}

HTML

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body> </html>

【讨论】：