页面内容不足时如何使页脚移至底部

Posted 2023-03-06

技术标签:

【中文标题】页面内容不足时如何使页脚移至底部【英文标题】：How to make footer go to bottom when there isn't enough content on page 【发布时间】：2017-02-09 05:17:19 【问题描述】：

使用 Bootstrap 3.3.7

我希望页脚始终与浏览器窗口的最底部对齐。

我确实不想要使用“粘性页脚”，因为我不希望它覆盖我的任何内容。

当页面有足够的内容时，它看起来不错，但当它没有时，它只是随机出现在屏幕上。

标记示例：

<body>
    <div class="container">
      <div class="row">
      <h1>My page</h1>
      <p>Page content here</p>
      </div>
    </div>

    <footer>
        <div class="container">
            <div class="row"><p>Footer content here</p></div>
        </div>
    </footer>
</body>

如果页面正文中有大量内容，那没关系。但对于短页面则不然。

我在默认高度使用默认导航栏

<nav class="navbar navbar-static-top navbar-inverse">

</nav>

我已经为此寻找解决方案，但似乎没有一个有效。不明白为什么 Bootstrap 做这么复杂的事情来做这么简单的任务。不是每个人都想要一个粘性页脚！

【问题讨论】：

看看这个***.com/questions/17966140/… @MoneerKamal 用于粘性页脚，这是我不想使用的。 @AudreyRoberts 粘页脚有什么问题？ bootstraps example 我认为您确实想要“粘性页脚”示例，但“粘性页脚”名称具有误导性。不覆盖内容，当内容长于视口时下推：bootply.com/4Tt79fRBDF 【参考方案1】：

如果您不关心 IE

html：

<body>
    <main>
        <!-- main content goes here -->
    </main>
    <footer>

    </footer>
</body>

CSS：

body 
    display: flex;
    flex-direction: column;
    min-height: 100vh;


main 
    flex: 1;

【讨论】：

@ErikPhilips 我接受它作为答案，因为它有效，并解决了我的问题。如果您有一个适用于所有浏览器的解决方案并愿意解释其工作原理，我将更改已接受的答案。如果没有，这只是工作并且可以满足我的需求。我的评论不是关于它是否有效，而是关于 SO 对 link-only-answers 皱眉的事实，因为如果链接死了，那么也会死这个答案。他已经用示例更新了答案，这意味着未来的用户不必担心链接是否失效。【参考方案2】：

如果你将身体高度设置为 100% 并删除页脚高度，则可以这样做

html, body 
        height: 100%;
    

.content 
        height: calc(100vh - 150px);
        height: -o-calc(100vh - 150px); /* opera */
        height: -webkit-calc(100vh - 150px); /* google, safari */
        height: -moz-calc(100vh - 150px); /* firefox */
    

.content 
    background-color:red;
    width: 100%;
    min-height: 500px;



.footer
  background-color:green;
  height:150px;

在jsfiddle查看我的代码

尝试改变