如何将页脚保持在底部，直到内容充满身体高度？ [复制]

Posted 2023-03-07

【中文标题】如何将页脚保持在底部，直到内容充满身体高度？ [复制]

【英文标题】：How to keep footer at the bottom until content filled with body height? [duplicate]

【发布时间】：2019-08-10 19:15:36

【问题描述】：

我想将页脚保留在浏览器底部，直到内容填满正文高度。让它的内容框为空。

这样做的正确方法是什么？

这是我的尝试：

Live Demo

SCSS：

.wrapper.container-fluid
    padding:0;
    margin: 0;
    border:2px dashed red;
    display: flex;
    flex-direction:column;
    height: 100%;
    max-height:inherit;

    header
        border: 1px  solid blue;
    

    div.content
        border:1px solid gray;
        display: flex;
        flex-direction:row;
        height: 100%;

        .leftnavi
            border:1px solid gray;
            width: 20%;
            background:lightgray;
        

        .rightContent
            border: 1px solid red;
            max-width: 100%;
            width: 100%;
            background:lightgreen;
        

    

    footer
        border: 1px solid green;
    

html:

<div class="wrapper container-fluid">

    <header>
        <h2>Header title goes here</h2>
    </header>

    <div class="header-navi">
        Header navi goes here
    </div>

    <div class="content">
        <div class="leftnavi">
            I am left navi
        </div>
        <div class="rightContent">
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quod labore distinctio nulla delectus, recusandae officiis at. Earum accusamus ea, sed dignissimos. Voluptatem, exercitationem! Dignissimos porro labore vel velit beatae.</div>

        </div>
    </div>

    <footer>Footer goes here</footer>

</div>

【问题讨论】：

***.com/questions/40020921

【参考方案1】：

在你当前的小提琴中使用这个 CSS

footer
    border: 1px solid green;
    position: absolute;
    bottom: 0;
    width: calc(100% - 16px);
    margin: 0;

【参考方案2】：

第一步，将容器的min-height设置为100vh。 4px 是由于您的 2px 边框（2px 顶部，2px 底部）。

.wrapper.container-fluid 
  …
  border: 2px dashed red;
  min-height: calc(100vh - 4px);

最后一步将flex-grow: 1 设置为主要内容部分。页脚将始终位于页面底部（如果内容需要滚动，则位于页面底部）。

div.content 
   …
  flex-grow: 1;

演示

.wrapper.container-fluid 
  padding: 0;
  margin: 0;
  border: 2px dashed red;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: inherit;
  min-height: calc(100vh - 4px);  /* Added */

.wrapper.container-fluid header 
  border: 1px solid blue;

.wrapper.container-fluid div.content 
  border: 1px solid gray;
  display: flex;
  flex-direction: row;
  height: 100%;
  flex-grow: 1; /* Added */

.wrapper.container-fluid div.content .leftnavi 
  border: 1px solid gray;
  width: 20%;
  background: lightgray;

.wrapper.container-fluid div.content .rightContent 
  border: 1px solid red;
  max-width: 100%;
  width: 100%;
  background: lightgreen;

.wrapper.container-fluid footer 
  border: 1px solid green;

body 
  margin: 0;

<div class="wrapper container-fluid">

  <header>
    <h2>Header title goes here</h2>
  </header>

  <div class="header-navi">
    Header navi goes here
  </div>

  <div class="content">
    <div class="leftnavi">
      I am left navi
    </div>
    <div class="rightContent">
      <div>Lorem ipsum dolor sit amet</div>

    </div>
  </div>

  <footer>Footer goes here</footer>


</div>

jsFiddle

【讨论】：

你现在应该知道使用内置的“投票关闭为重复”而不是回答。

@Andy Hoffman - 我使用的是 chrome 70，它无法正常工作。发现 chrome 有 bug，你有 chrome 70 的修复吗？

@3gwebtrain 我在 Chrome 73.0.3683.75 中测试过，它看起来与 Safari/Firefox/Edge 等相同。请附上网页链接，以便我可以直接在 Chrome 中测试。