内容短或缺失时如何将页脚推到页面底部？答案

【问题标题】：How to push a footer to the bottom of page when content is short or missing?内容短或缺失时如何将页脚推到页面底部？
【发布时间】：2011-06-02 07:52:00
【问题描述】：

我有一个包含页眉、内容和页脚 div 的外部 div 的页面。我希望页脚 div 紧贴浏览器的底部，即使内容 div 不够高而无法填充可视区域（即没有滚动）。

【问题讨论】：

主标签 => 最小高度：100% 或 95%

标签： css html

【解决方案1】：

您的问题可以通过使用 flexbox 轻松解决。只需将您的 .container 和 .footer 包装在一个最小高度为 100vh 的 flex 容器中，将方向切换为 column 以便它们相互堆叠，并在内容之间用空格对齐，以便页脚将移动到底部。

.flex-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
}

<div class="flex-wrapper">
  <div class="container">The content</div>
  <div class="footer">The Footer</div>
</div>

【讨论】：

这是迄今为止实现此 IMO 的最简单方法
我在 20 个网站上寻找这个解决方案......只有这个最终对我有用
为了更简洁的标签布局，您还可以将这些规则应用于正文并删除包装容器。
这是正确的方法！
很好的答案。我improved it slightly 允许页眉，然后是自上而下的内容，然后页脚位于底部（或折叠下方）

【解决方案2】：

我想要的是将页脚放在浏览器视图的底部，前提是内容的长度不足以填满浏览器窗口（非粘性）。

我可以通过使用 CSS 函数 calc() 来实现。所有现代浏览器都支持它。你可以这样使用：

<div class="container">CONTENT</div>
<div class="footer">FOOTER</div>

CSS：

.container
{
    min-height: 70%;
    min-height: -webkit-calc(100% - 186px);
    min-height: -moz-calc(100% - 186px);
    min-height: calc(100% - 186px);
}

将 186 更改为页脚的大小。

【讨论】：

【解决方案3】：

虽然这个问题很老，但我想稍微改进一下great answer by Luke Flournoy。

只有在包装器中有两个元素时，卢克的回答才有效。至少有 3 个是很常见的：页眉、主要内容和页脚。有了这三个元素，Luke 的代码将它们垂直均匀地隔开——很可能不是你想要的。使用多个元素，您可以这样做：

.flex-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: flex-start;
}

.footer {
  margin-top: auto;
}

<div class="flex-wrapper">
  <div class="header">The header</div>
  <div class="content">The content</div>
  <div class="footer">The footer</div>
</div>

【讨论】：

这可行，但它也会强制布局上的所有其他项目都参与到弹性流中，这并不总是可取的。
@boylec1986 这个问题是关于页眉内容页脚设置的；如果你想要更高级的东西，你可以把“更高级”的部分放在内容中。

【解决方案4】：

使用带有 flex-grow:1 的空白 div 填充页脚前未使用的空间。

<body style="min-height: 100vh; display: flex; flex-direction: column;">

  Any content you want, 
  put it here. Can be wrapped,
  nested, whatever.

<div style="flex-grow:1"></div>

<!-- Any content below this will always be at bottom. -->

<footer>Always way at the bottom</footer>
</body>

根据需要将样式提取到 css。这可以通过将

设置为 display:flex;

【讨论】：

最好的！谢谢
我喜欢的是没有必要的包装元素
我已经尝试了几十个代码，这是最好的。谢谢。

【解决方案5】：

例如：http://jsfiddle.net/AU6yD/

html, body { height: 100%; }

#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -30px; }
#bottom, #push { height:30px;}

body { background:#333;}
#header { height:30px; background:#000; color:#fff; }
#footer { height:30px; background:#000; color:#fff; }

<div id="wrapper">
    <div id="header">
        Header
    </div>
    <div id="push"></div>
</div>
<div id="bottom">
    <div id="footer">
        Footer
    </div>
</div>

【讨论】：

【解决方案6】：

我做了 Jahmic up top 所做的事情（暂时不让我发表评论），除了我必须使用 VH 而不是 % 因为我不能只将它应用于容器类。

#inner-body-wrapper
{
    min-height: 70vh;
    min-height: -webkit-calc(100vh - 186px);
    min-height: -moz-calc(100vh - 186px);
    min-height: calc(100vh - 186px);
}

【讨论】：

【解决方案7】：

你可以使用 Flexbox 做你想做的事，例如：

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

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.content {
    flex-grow: 1;
}

请注意，页脚必须在 content 元素之外

html 结构如下所示：

<html>
    <body>
        <div class="wrapper">
            <header></header>
            <div class="content">
                <!-- Content -->
            </div>
            <footer></footer>
        </div>
    </body>
</html>

【讨论】：

【解决方案8】：

要使其在移动设备上的页脚高于桌面设备时响应式工作，您无法真正知道页脚高度。一种方法是拉伸页脚以覆盖整个屏幕。

html,
body {
  height: 100%;
}

.container {
  min-height: 80%;
  background-color: #f3f3f3;
}

.footer {
  background-color: #cccccc;
  box-shadow: 0px 500px 0px 500px #cccccc;
}

<div class="container">Main content</div>
<div class="footer">Footer</div>

【讨论】：

【解决方案9】：

我试过：http://jsfiddle.net/AU6yD/ 因为这是最好的选择，但是当<div id="wrapper"> 的内容开始变得太大时我遇到了问题 evidence.png，我为解决这个问题所做的就是在每次像这样更改该 div 的内容时刷新 body 大小：

var body = document.body,
html = document.documentElement;
body.style.height = 100 + "%";
setTimeout(function(){
   var height = Math.max( body.scrollHeight, body.offsetHeight,
                          html.clientHeight, html.scrollHeight, 
                          html.offsetHeight );
   body.style.height = height + "px";
}, 500);

【讨论】：

【解决方案10】：

试试这个codepen.io/dendii/pen/LLPKJm媒体响应

html, body {
  color:#fff;
}
.wrapper{
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto;
    min-height: 100vh;
}
.main{
  width:100%;
  overflow:hidden;
}
.main-inner {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
article,aside{
  float:left;
  padding:20px 10px;
}
article{
  width:70%;
  background:darkred;
}
aside{
  width:30%;
  background:darkblue;
}
.top {
  padding:20px 10px;
  height:100%;
  background:darkgreen;
}
.bottom,.text-mid {
  padding:20px 10px;
  height:100%;
  background:darkorange;
}
.text-mid {
  margin-top: auto;
  background:darkgrey;
}
@media (max-width: 768px){
  .main-inner{
    display: block;
  }
  article,aside{
    width:100%;
    float:none;
    display: block;
  }
}

<div class="wrapper">
    <header class="top">
      <h1>Header</h1>
    </header>
<div class="main"><div class="main-inner">
  <article>
    blank content
  </article>
  <aside>
    class sidebar
  </aside>
</div></div>
<div class="text-mid">
    <div class="center">
        Whatever you want to keep.
    </div>
</div>
<footer class="bottom">
    <div class="footer">
        Footer
    </div>
</footer>
 </div>

如果你想要一个主包装器来调整屏幕的另一种选择EqualHeight

【讨论】：

【解决方案11】：

我已经用 jquery 解决了同样的问题

    var windowHeiht = $(window).height();
    var footerPosition = $("#asd-footer").position()['top'];

    if (windowHeiht > footerPosition) {
        $("#asd-footer").css("position", "absolute");
        $("#asd-footer").css("bottom", "0");
        $("#asd-footer").css("width", "100%");
    }

【讨论】：

【解决方案12】：

重新设计 jQuery 解决方案。我让它与调整窗口大小一起工作。当窗口大于页面时，页脚样式的位置“绝对”固定在窗口底部。当窗口小于页面时，页脚停留在页面底部 - 从底部滚动。

<style>
    .FooterBottom {
        width:100%;
        bottom: 0;
        position: absolute;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        FooterPosition();

        $(window).resize(function () {
            FooterPosition();
        });
    });

    var originalFooterBottom = 0;

    function FooterPosition() {
        var windowHeight = $(window).height();
        if (originalFooterBottom == 0) {
            var footer = $("#Footer");
            originalFooterBottom = footer.position()['top'] + footer.height();
        }

        if (windowHeight > originalFooterBottom) {
            var footerElement = document.getElementById("Footer");
            if (!footerElement.classList.contains('FooterBottom')) {
                footerElement.classList.add('FooterBottom');
            }
        }
        else {
            var footerElement = document.getElementById("Footer");
            if (footerElement.classList.contains('FooterBottom')) {
                footerElement.classList.remove('FooterBottom');
            }
        }

    }
</script>

我尝试了许多仅样式的解决方案，但都没有奏效。这个 Javascript/Style 解决方案对我来说工作得很好，即使它奇怪地混合了 jQuery 和 GetElement。

感谢 Asad 的帖子。

【讨论】：

【解决方案13】：

body{
    position:relative;
    min-height:100vh;
}
footor{
     position:absolute;
    bottom:0%;
    width:100vw;
}

【讨论】：

欢迎来到 Stack Overflow！最好描述您的代码或它与其他答案的不同之处。

【解决方案14】：

用下面的类包裹你的页脚：

<div class="footer">
<h1>footer content</h1>

然后将以下css属性添加到页脚：

.footer{
position: fixed;
bottom: 0;

}

【讨论】：

【解决方案15】：

我刚刚将位置更改为粘性并将顶部设置为 100%。然后我转到其父块并将其最小高度设置为 100% 这解决了我的问题。

在我的例子中，父块是body，所以我改变了body的最小高度。

.footer {
position: sticky;
top: 100%;
text-align: center;    
width: 100%;
height: 60px;
background-color: #1abc9c;}


body{
margin:0;
padding:0;
min-height:100vh;}

【讨论】：

【解决方案16】：

我试过了，到目前为止效果很好

position:absolute;
bottom:0;
width:100%;

或

position:absolute;
bottom:0;
left:0;
right:0;

【讨论】：

【解决方案17】：

这就是我为我的页面所做的事情

&lt;h6 style="position:absolute; bottom:0;"&gt;This is footer at bottom of page without scrollbars&lt;/h6&gt;

【讨论】：

如果有 div 覆盖整个页面，则建议的页脚不会被推到底部，而是会留在原处。