html - 根据窗口从它开始的地方获取一个全高div

Question

这个问题更具体的项目。我的模板中有两个<div>看起来像这样。

我希望最后一个 div 从其垂直位置获取与窗口相对应的全高。例如，

如果我添加另一个 div，它应该看起来像这样。

现在在这个例子中，我明确设置高度只是为了演示目的。

如何使最后一个 div 根据其垂直位置计算高度，并且所有内容都应在窗口内可见。

标签： htmlcss

Answer 1

您可以为此使用 flexbox。流程是column这样的，div 是垂直对齐的。最后一个 div 得到一个flex:1展开。

flex:1或者flex:1 1 0%是一个简短的写作：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

对于您的最后一个 div，flex-grow 和 flex-basis 很重要。

见弹性属性

body {
  height: 100vh;
}

.container {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}

.container>div {
  background: #ccc;
  border-top: 3px solid white;
}

.container>div:last-child {
  flex: 1;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>