当css中没有足够的内容时，使元素覆盖整个可用空间答案

【问题标题】：make element cover whole available space when there isn't enough content inside css当css中没有足够的内容时，使元素覆盖整个可用空间
【发布时间】：2017-05-24 18:01:01
【问题描述】：

我有一个具有任意高度的 HTML 工具栏（我没有明确控制它）和主要内容 div（在容器 div 内）显示在工具栏下方。主要内容中的内容数量可能会有所不同。

如果可用内容不足以覆盖整个屏幕，那么主要内容 div 应该覆盖工具栏下方屏幕上可用的剩余高度。如果内容大于屏幕大小，则应显示适当的垂直滚动条以显示完整的内容。

我的结构是这样的：

<html>
    <body>
        <toolbar></toolbar>
        <container>
            <main div>...</main div>
        </container>
    </body>
</html>

目前我的主体和 html 的 css 看起来像：

* {
  margin: 0;
}

html,
body {
  height: 100%;
}
#container{
    height: 100%
    width:100%
}
#main-div{
    // how to make it full screen when there isn't enough content
}

【问题讨论】：

对不起。
没问题 :) ...有时另一种解决方案更合适，所以你不必改变，只是问

标签： html css flexbox

【解决方案1】：

使用 Flexbox，将 body 设置为具有列方向的 flex 容器，将 container flex: 1 填充到剩余的高度，并使该容器也成为具有行方向的 flex 容器，最后给出main flex: 1 水平填充剩余部分。

* {
  margin: 0;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}
.container {
  flex: 1;
  display: flex;
}
main {
 flex: 1;
 background: lightblue;
}

<div class="toolbar">
  toolbar
</div>
<div class="container">
  <main>main</main>
</div>

【讨论】：

【解决方案2】：

您可以使用flex 与列方向来达到所需的结果

* {
  margin: 0;
}

html,
body {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}
#container {
    height: 100%;
    width:100%;
}
#main-div {
    flex: 1 1 auto;
    background-color: green;
}

<html>
    <body>
        <toolbar>
          Content of toolbar with unknow height and you have no control of it
        </toolbar>
        <main id="main-div">
          Some content <br />
          Some content <br />
          Some content <br />
          Some content <br />
          Some content <br />
          Some content <br />
          Some content <br />
          Some content <br />
          Some content <br />
          Some content <br />
          Some content <br />
        </main>
    </body>
</html>

【讨论】：