时间戳

首页 > 解决方案 > 让 div 使用屏幕的所有剩余高度

css - 让 div 使用屏幕的所有剩余高度

问题描述

我需要让.content div 使用剩余的屏幕高度。我不知道.header的高度是多少-我不能使用 calc(100vh - headerHeight)

HTML结构

<html>
    <body>
        <div class="header">header</div>
        <div class="content">content</div>
    </body>
</html>

CSS

html, body {
    height: 100%;
}

试过了

.content {
    display: flex;
    flex-grow: 1;
}

使用 100vh 不起作用，因为它产生了一些垂直滚动（具有.header的高度）

.content {
    height: 100vh
}

它应该看起来像这样

+-------------------------------+
|            header             |
+-------------------------------+
|                               |
|                               |
|            content            |
|                               |
|                               |
+-------------------------------+

标签： cssflexbox

解决方案

将<body>元素设置为您的弹性容器。
然后你可以设置.content它能够增长。

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

body {
  display: flex;
  flex-direction: column;
}

.header {
  background-color: lightgreen;
}

.content {
  flex: 1 0 auto;
  background-color: lightblue;
}
<div class="header">header</div>
<div class="content">content</div>

有关参考，请参阅flexbox 的基本概念。

推荐阅读