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

Question

<分区>

Answer 1

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