div占剩余高度

时间:2016-04-26 19:27:36

标签: javascript jquery html css

我有以下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 height = 100vh - div1 height - div2身高。

我猜flex在这里很有用,但我不太清楚如何使用它。任何帮助将不胜感激。

感谢?

0 个答案:

没有答案