如何强制我的页脚粘在 CSS 中任何页面的底部？

Posted 2023-03-21

【中文标题】如何强制我的页脚粘在 CSS 中任何页面的底部？

【英文标题】：How can I force my footer to stick to the bottom of any page in CSS?

【发布时间】：2011-07-27 21:04:09

【问题描述】：

这是我的代码：

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

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

编辑：为了更清楚地了解问题所在：页面加载时，页脚按预期显示在底部。但是，当网页的高度大于屏幕上的尺寸以致出现滚动条时，页脚将停留在同一位置。也就是说，当页面高度 100% 时，页脚不在该页面的底部，而是在可见屏幕的底部。

编辑：令人惊讶的是，以下解决方案均无效。我最终实现了一个侧边栏。

【问题讨论】：

重复How do you get the footer to stay at the bottom of a Web page?

SLaks 的意思是：这是一个糟糕的问题，因为您既没有描述想要的结果，也没有描述得到的结果。你写的是有效的 CSS 代码，这就是我能告诉你的。此外，如上所述，此问题之前已被提出并回答。

【参考方案1】：

您可能正在寻找this example：

<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/

*/

【讨论】：

可变高度页脚怎么样？

@DustinGraham：您需要使用 flex，并将滚动条移至内容

【参考方案2】：

试试这个：

position: fixed;  
bottom: 0;

【讨论】：

这会将页脚放在窗口底部，但不会放在页面底部（如果页面高于窗口）...

【参考方案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>

【参考方案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 */
  

【讨论】：

推送类是干什么用的？

【参考方案5】：

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

【参考方案6】：

不要使用位置：绝对；对于任何页脚，因为页面的高度会发生变化。如果它是绝对的，那么您的页脚将不会随着页面高度而移动。

你想使用 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>

【讨论】：

你从哪里得到 300px 和 600px？不是很通用的解决方案。

【参考方案7】：

这就是我所做的，它导致我的页脚停留在底部。

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

【参考方案8】：

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

这对我也有用....

【参考方案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;

Here 在行动中。

【讨论】：

This 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>