得到自我的顶部坐标 - ＆gt;计算（100vh - y）

Question

我有一个元素，我希望它占据它下面的所有空间，直到浏览器窗口的底部。

我可以以某种方式得到元素的y偏移吗？我不知道如何定义y：

.occupy-space-below {
    max-height: calc(100vh - y);
}

Answer 1

而不是使用calc（因为你的上层元素的高度未知）...
您可以使用 flexbox

轻松实现此目的

＆＃13;

＆＃13;

/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}


.flex-column {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grow{
  flex: 1;
  background: gold;
}

＆＃13;

<div class="flex-column">

  <div>
    I<br>have <br>unknown<br>height
  </div>

  <div class="grow">
    occupy space below
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;