Question

我有一个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
}

Answer 1

您可以使用flex列方向来获得所需的结果

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 2

使用Flexbox，在body设置带有列方向的Flex容器的情况下，让container flex: 1填充剩余高度并使其成为一个Flex容器，带有行方向，最后给main flex: 1水平填充剩余部分。

＆＃13;

* {
  margin: 0;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}
.container {
  flex: 1;
  display: flex;
}
main {
 flex: 1;
 background: lightblue;
}

＆＃13;

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

＆＃13;

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

2 个答案: