我有以下div
<div class="top">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="inner3"></div>
</div>
这是 CSS:
.top {
height: 100vh;
}
.div1 {
min-height: 215px;
box-sizing: border-box;
height: 30vh;
}
.div2 {
box-sizing: border-box;
min-height: calc(100vh - 30vh - 265px);
padding-top: 2.5em;
margin-top: 0;
display: table;
}
.div3 {
min-height: 265px;
box-sizing: border-box;
background: white;
display: table;
width: 100%;
font-weight: 700;
padding-bottom: 42px;
}
我不想使用 calc(100vh - 30vh - 265px) 来设置 div 2 的最小高度。我怎样才能让它占据剩余的高度(意味着 div2 高度 = 100vh - div1 高度 - div2 高度。
我猜 flex 在这里可能会有用,但我不太确定如何使用它。任何帮助将不胜感激。
谢谢?
在将其标记为重复之前,请注意:我尝试使用 flex,但它在 IE11 中效果不佳。
最佳答案
不知道这是否是最好的主意,但为了克服跨浏览器的限制,我通常使用 javascript 重新计算它。我编写 javascript 函数,然后在调整窗口大小和加载时触发它。
// some jQuery
function adjustHeight() {
var fullHeight = $(window).height();
var neededHeight = fullHeight - fullHeight*0.3 - 263;
$('.div2').css('min-height', neededHeight + 'px');
}
$(document).ready(function(){ adjustHeight(); });
关于javascript - 使div适合剩余高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36874951/