html页面布局，内容div高度填满所有剩余空间

Question

无法为我为我的投资组合网站创建的页面获得所需的工作布局。 我有导航的标题（固定大小的 div）。 然后我有内容 div 我有页脚

<div>header</div>
<div>content</div>
<div>footer</div>

我希望页脚固定大小，比如说 200 像素，始终固定在页面底部。但内容应填充从页眉到页脚的所有剩余空间。这样内容 div 的高度将取决于窗口的高度。通过改变高度，只有内容 div 会改变大小。

Answer 1

flex 让它变得简单：

body {
  margin:0;
  height:100vh;
  /* eventually : min-height: xx ; to avoid main to be squeezed down to zero  in between header and footer */
  display:flex;
  flex-flow:column;
  }
.main {
  flex:1;/* fills remaining space */
  overflow:auto;/* comes handy */
  background:lightgray;/* see me */
  }
  div {
  padding:1em;/* whatever */
  }

<div>header of any height</div>
<div class="main">content</div>
<div>footer of any height</div>

Answer 2

header {
    width: 100%;
    position: fixed;
    background-color: #9f0d0d;
    color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    min-height: 5%;
}

    header :first-child {
        vertical-align: middle;
        margin-top: auto;
        margin-bottom: auto;
    }

article {
    top: 55px;
    width: 100%;
    height: 90%;
    position: fixed;
}

footer {
    top: 95%;
    min-height: 5%;
    width: 100%;
    position: fixed;
    padding: 10px 15px;
    background-color: #9f0d0d;
    color: #f5f5f5;
    border-top: 1px solid #ddd;
}

    footer :first-child {
        vertical-align: middle;
        margin-top: auto;
        margin-bottom: auto;
    }

.centre {
    text-align: center;
}

<div class="centre">
  <header>Header</header>
  <article>Remaining space</article>
  <footer>Footer</footer>
</div>