是否可以使inner-main-dynamic-size
元素(橙色框)填充元素(红色框/边框)的剩余空间outer-fixed-size
?
相关元素占据其父元素高度的 100%,但由于父元素有另一个固定大小的子元素(紫色框),因此它会被推到父元素之外。
.outer-fixed-size {
width: 400px;
height: 100px;
background-color: red;
padding: 5px;
box-sizing: border-box;
}
.inner-top-fixed-size {
height: 50px;
width: 100%;
background-color: purple;
}
.inner-main-dynamic-size {
height: 100%;
width: 100%;
background-color: orange;
}
<div class="outer-fixed-size">
<div class='inner-top-fixed-size'>
</div>
<div class='inner-main-dynamic-size'>
</div>
</div>
我知道我可以对inner-main-dynamic-size
元素进行硬编码height: calc(100% - 50px)
,但如果可能的话,我宁愿避免对如此简单的计算进行硬编码。
如果我正确理解你的问题并且这两个元素将始终位于彼此之上,那么将父元素设置为弹性容器( add
display: flex;
)可以解决该问题。这样子分区将保持灵活性。flex-direction: column
将确保子div最终不会彼此相邻而是垂直堆叠。flex: 1
而不是动态 div 上的高度将使其占用剩余空间。更多关于flex-direction和一个很棒的flex 指南。
这个魔法是通过使用
flex
布局来实现的。