logo标签列表

获取自身顶部坐标 --> calc(100vh - y)

csssass
7

我有一个元素，希望它能占据所有在它下方且距离浏览器窗口底部的空间。

我应该如何获取该元素的y偏移量呢？我不知道如何定义y：

.occupy-space-below {
    max-height: calc(100vh - y);
}
需要使用js，但还有许多其他方法 - https://dev59.com/6XVD5IYBdhLWcg3wGXhI - Stickers
1个回答
5

如果您的上层元素高度未知，不要使用calc...
您可以使用flexbox弹性布局轻松实现此目的。

/*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;
}
<div class="flex-column">

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

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

</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接