用两个具有固定高度和动态高度的元素填充100vh

Question

我的div容器中有2个元素。

第一个元素的高度固定，例如：

element1 {height: 40px;}

我要做的是用第二个元素填充剩下的100％减去第一个元素的高度：

element2 {height: 100% - 40px;}

仅靠CSS如何实现？

Answer 1

您正在寻找calc()：height: calc(100vh - 40px)。

如果带有height: 40px的元素需要可变，则应使用：

.parent {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
}

.parent>* {
  flex-grow: 0;
  border: 1px solid red;
}
.growing {
  flex-grow: 1;
}

body {
  margin: 0;
}
@media (max-width: 700px) {
  .not-growing{
    min-height: 100px;
  }
}

<div class="parent">
  <div class="not-growing"> not growing</div>
  <div class="growing"> growing</div>
</div>