如何在CSS中让页脚始终保持在页面底部？

Question

这是我的代码：

#footer {
   font-size: 10px;
   position:absolute;
   bottom:0;
   background:#ffffff;
}

我不知道这有什么问题 - 有人能帮忙吗？

编辑：为了更清楚地说明问题：当页面加载时，页脚按预期显示在底部。然而，当网页的高度大于屏幕尺寸，例如出现滚动条时，页脚保持在同一位置。也就是说，当页面高度小于或等于100％时，页脚在底部。但是，当页面高度大于100％时，页脚不在该页面的底部，而在可见屏幕的底部。

编辑：令人惊讶的是，以下解决方案都没有起作用。我最终实现了一个侧边栏。

- oxo

---

怎样将页脚固定在网页底部？的重复。 - Phrogz

SLaks的意思是：这是一个糟糕的问题，因为你既没有描述你想要的结果，也没有描述你得到的结果。你所写的是有效的CSS代码，这是我能告诉你的全部。此外，正如上面所提到的，这个问题以前已经被问过并得到了回答。 - Phrogz

Answer 1

你可能正在寻找这个示例:

<div class="wrapper">
    Your content here
    <div class="push"></div>
</div>
<div class="footer">
    Your footer here
</div>

CSS:

对于一个高度为142像素的页脚

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

- SLaks

---

变高的页脚怎么办？ - Dustin Graham

@DustinGraham：你需要使用flex，并将滚动条移动到内容。 - SLaks

Answer 2

试试这个：

position: fixed;  
bottom: 0;

- jeegnesh

---

这将把页脚放置在窗口底部，但不会放置在页面底部（如果页面高度大于窗口高度）... - severin

Answer 3

我有同样的问题，来到这里寻找答案，没有找到，然后尝试了一些自己的实验，最终获得了解决方案：

#body {
  overflow-y: 0 auto;
}
#footer {
  position: fixed;
  top: 100vh; left: 0;
  margin-top: -100px;
  width: 100%; height: 100px;
  padding: 10px;
  color: #fff; background-color: rgba(0,0,0,0.6);
}

<div id="body">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div id="footer">
  <span>Some dummy Text</span>
</div>

- Fabricio

Answer 4

包装器是你页面的其余部分。负/正边距/高度值是魔法发生的地方。

.wrapper 
  {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
  }
.footer, .push 
  {
    height: 142px; /* .push must be the same height as .footer */
  }

- k to the z

---

推送类是用来做什么的？ - SandRock

Answer 5

.footer-small, .push {
    background-color: #2C3E50;
    position: fixed;
    padding-top: 5px;
    clear:both;
    width: 100%;
    bottom:0px;
    z-index: 0;
}

这对我也有效...

- Makhi Ngubane

Answer 6

不要为任何页脚使用position: absolute;，因为页面高度会发生变化。如果使用绝对定位，则页脚将不随页面高度移动。

你应该使用Ryan Fait的方法。

虽然我个人会这样做；

.wrap {margin: auto; width: 980px;}
#content {min-height: 600px;}
#footer {height: 300px;}

<div class="wrap">
<div id="content">
</div>
</div>
<div id="footer">
<div class="wrap">
</div>
</div>

这样你就不必纠结于负边距和填充了。此外，这很容易成为HTML5的一部分，将#footer更改为

<footer>
</footer>

- PHP

---

你从哪里得到了300px和600px？这不是非常通用的解决方案。 - Tomas Tomecek

Answer 7

#footer { clear:both; position:fixed; width:100%; height:50px; bottom:0; background:black;}

- Samuel

Answer 8

这就是我所做的，它使得我的页脚保持在底部。

.footer2{
background-color:#606060 ;
color: #ffffff;
height: 30px;
bottom:0px;
position:fixed;
width:100%;
}

- Carla

Answer 9

我努力寻找解决方案，但没有任何建议能够实现我的需求：

• 如果内容太少，请停留在页面底部而不是中间。
• 如果有足够的内容，请不要粘在内容上覆盖，只需停留在底部即可。
• 从第一眼看起就隐藏它，只有用户向下滚动时才会看到页脚。

这是对我有用的方法：

HTML:

<body>
  <div class="page-wrapper">
    <h1>
      Page
    </h1>
  </div>
  <footer>
    Footer here
  </footer>
</body>

CSS：

body {
    height: 100%;
    width: 100%;
}

.page-wrapper {
  min-height:100vh; /*1vh = 1% of browser screen height*/
}

footer{
    position: relative;
    width: 100%;
    bottom: 0px;
}

这里展示了它的作用。

- J0ANMM

---

这个答案与此方向相同，解释得更好。 - J0ANMM

Answer 10

为什么不用jQuery呢？

在页眉和页脚之间放置一个包装器div，并使用jQuery为包装器分配min-height属性，使其等于文档高度与（页眉高度+页脚高度）之差。

<script type="text/javascript">
$(document).ready(function(){
 var dh = $(document).height(); //document height here
 var hh = $('header').height(); //header height
 var fh = $('footer').height(); //footer height
 var wh = Number(dh - hh - fh); //this is the height for the wrapper
 $('#wrapper').css('min-height', wh); //set the height for the wrapper div
});
</script>

- Calin Rusu