Question

我需要.content div使用所有可用空间

body {
    height: 100%;
}
.nav {
    padding: 20px;
}

.content {
    height: 100%;
}

<body>
    <div class="nav">nav</div>
    <div class="content">content</div>
</body>

由于我不知道.nav的身高我无法使用height: calc(100%-Xpx) 还有其他方法可以让.content使用页面的剩余高度吗？

由于

Answer 1

在min-height: 100vh上使用body，然后将父级（在这种情况下为body）设置为display: flex; flex-direction: column，并使用flex-grow: 1上的.content它使用可用空间。

＆＃13;

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.nav {
  padding: 20px;
}

.content {
  flex-grow: 1;
  background: #eee;
}

＆＃13;

<div class="nav">nav</div>
<div class="content">content</div>

＆＃13;

使用CSS calc（）计算剩余高度

1 个答案: