时间戳

首页 > 解决方案 > 如何将页脚保持在底部，直到内容充满身体高度？

html - 如何将页脚保持在底部，直到内容充满身体高度？

问题描述

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

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

这是我的尝试：

现场演示

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>

标签： htmlcsssassflexbox

解决方案

第一步是将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

推荐阅读