制作DIV适合剩余高度

我有以下的div制作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; 
}

我不想使用钙（100vh - 30vh - 265px）设置分 - div的高度2.如何获得剩余高度（意思是div2 height = 100vh - div1 height - div2 height。

我猜Flex可能在这里很有用，但我不是相当确定如何使用它。任何帮助都是g非常感谢。

谢谢？

在将此标记为重复项之前，请注意：我尝试使用flex，但在IE11中效果不佳。

来源

2016-04-26 J K

应该在IE11正常工作。你能举一个例子吗？唯一的问题将是IE10，你将不得不使用-ms-前缀。 –

看起来像http://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex/25098486的副本如果您愿意使用flex –

Flexbox在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(); });

来源

2016-04-26 20:36:43

柔性旁边，显示：表属性可以帮助以及对旧的浏览器。

在这种情况下，高度原来是最小高度

.top { 
 
    height: 100vh; 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.top>div { 
 
    display: table-row; 
 
} 
 
.inner1 { 
 
    min-height: 215px;/* becomes useless */ 
 
    box-sizing: border-box; 
 
    height: 30vh; 
 
    background: tomato; 
 
} 
 
.inner2 { 
 
    box-sizing: border-box; 
 
    padding-top: 2.5em;/* i'll get squeezed here */ 
 
    margin-top: 0;/* useless, border-spacing is to be used */ 
 
    background: turquoise; 
 
} 
 
.inner3 { 
 
    height: 265px; 
 
    box-sizing: border-box; 
 
    background: yellow; 
 
    display: table; 
 
    width: 100%; 
 
    font-weight: 700; 
 
    padding-bottom: 42px;/* ? :) */ 
 
}

<div class="top"> 
 
    <div class="inner1">1</div> 
 
    <div class="inner2">run me in full page to see how i behave :)</div> 
 
    <div class="inner3">3</div> 
 
</div>

来源

2016-04-26 20:42:49

制作DIV适合剩余高度

回答

相关问题