html - 根据兄弟高度动态地使 div 填充剩余空间
问题描述
我正在尝试div
根据兄弟高度动态填充窗口中的剩余空间。
这个想法是,如果header
div 改变高度,page-wrapper
将根据剩余空间动态改变它的高度。header
(如果div 改变高度,避免溢出)
头文件.sass
.header {
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 2rem;
}
索引.html
<html>
<head></head>
<body>
<div id="root">
<div class="header">
<div>
...
</div>
</div>
<div id="page-wrapper">
div will fill remaining space
</div>
</div>
</body>
</html>
当前解决方案
我知道我可以使用它来实现这一点,cal()
但这将涉及$headerHeight
如果header
高度发生变化,则更改硬编码值
.page-wrapper {
height: calc(100vh - #{$headerHeight});
background-color: red;
}
解决方案
推荐阅读
- kotlin - 应用程序在 GooglePlay 商店中崩溃,但在模拟器和物理设备上本地开发时不会崩溃
- angular - 我们可以把禁用属性放到角度选择器上吗
- c++ - 如何更新已经存在的 cout 语句的内容
- c# - 使用过滤器属性验证模型
- scala - 在 Scala 中将 null 转换为案例类的实例
- c# - 该平台不支持操作
- angular - MatSort 不使用 Angular 8 对 MatTable 中的数据进行排序
- svn - SVN - 在数据库中找到带有校验和“$sha1$5aa2d91900d7c70f2153f5f907946c7a339”的原始文本,但在磁盘上没有
- node.js - await 不等待执行?
- typescript - Webpack 无法编译 ts 3.7 (Optional Chaining, Nullish Coalescing)