容器Div无法滚动到底部问题求助（未知Header高度场景）

问题详情 #

需要让.content元素占满.container容器内的可用视口空间，但设置height:100%后，.content会和.container等高，被.header挤压导致底部内容被遮挡，且无法确定.header的具体高度，不能用calc()。

原始代码 #

CSS #

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    height: 100%;
    width: 100%;
}

.header {
    padding: 10px;
    background: dodgerblue;
    width: 100%;
    color: #fff;
}

.content {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background: ivory;
}

.contentData {
    padding: 20px;
    margin: 20px;
    border: 1px solid silver;
}

HTML #

<div class="container">
  <div class="header">
    Header Title
  </div>
  <div class="content">
    <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
        <div class="contentData">
      Donec mollis hendrerit risus.

      Etiam imperdiet imperdiet orci.

      Maecenas egestas arcu quis ligula mattis placerat.

      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

      Donec mollis hendrerit risus.
    </div>
  </div>
</div>

解决方案 #

方法1：使用Flexbox布局（推荐） #

修改.container为flex容器，设置垂直方向排列，让.content自动填充剩余空间：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.header {
    padding: 10px;
    background: dodgerblue;
    color: #fff;
}

.content {
    flex: 1;
    overflow-y: scroll;
    background: ivory;
}

.contentData {
    padding: 20px;
    margin: 20px;
    border: 1px solid silver;
}

方法2：使用Grid布局 #

通过Grid将容器分为两行，第一行自适应.header高度，第二行占满剩余空间：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
}

.header {
    padding: 10px;
    background: dodgerblue;
    color: #fff;
}

.content {
    overflow-y: scroll;
    background: ivory;
}

.contentData {
    padding: 20px;
    margin: 20px;
    border: 1px solid silver;
}

方法3：使用绝对定位 #

给.container设置相对定位，.content绝对定位，让它从.header底部开始延伸至容器底部：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    height: 100%;
    width: 100%;
    position: relative;
}

.header {
    padding: 10px;
    background: dodgerblue;
    width: 100%;
    color: #fff;
    box-sizing: border-box;
}

.content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll;
    background: ivory;
}

.contentData {
    padding: 20px;
    margin: 20px;
    border: 1px solid silver;
}

内容的提问来源于stack exchange，提问作者TK421