使行占用高度上的剩余空间

问题描述：

.row2是粘在窗口底部的固定高度页脚。我想让.row1占据窗口中的所有剩余高度，使其内部的图像可以像.row1高度一样大。使行占用高度上的剩余空间

即使使用flexbox，我也无法弄清楚如何做到这一点。

简体HTML结构我是：

<div class="wrapper"> 
    <div class="row1">This row takes up remaining space in height, image should scale up to touch footer 
     <br /> 
     <img src="http://www.placehold.it/200x200" /> 
    </div> 
    <div class="row2">Fixed height footer always stuck to bottom of window</div> 
</div>

的jsfiddle如下： http://jsfiddle.net/1swdf6eh/5/

juwt add width 100％; http：//jsfiddle.net/1swdf6eh/6/ –

答

您有.row2一个固定的高度。所以，你可以使用calc(100% - 180px)为.row1

.wrapper { 
 
    height: 100vh; 
 
    border: 1px solid black; 
 
    position: relative; 
 
} 
 
.row1 { 
 
    text-align: center; 
 
    background: #ececec; 
 
    height: calc(100% - 180px); 
 
} 
 
img { 
 
    height: 100%; 
 
} 
 
.row2 { 
 
    height: 180px; 
 
    width: 100%; 
 
    background: blue; 
 
    color: white; 
 
    text-align: center; 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div class="wrapper"> 
 
    <div class="row1">This row takes up remaining space in height, image should scale up to touch footer 
 
    <br /> 
 
    <img src="http://www.placehold.it/200x200" /> 
 
    </div> 
 
    <div class="row2">Fixed height footer always stuck to bottom of window</div> 
 
</div>

值得一提的是，对calc（）的浏览器支持不是100％。如果您需要支持IE8和较旧的Android浏览器，则会遇到问题。请参阅http://caniuse.com/#feat=calc。不过，这比flexbox有更好的支持，因此可能是最好的选择。另外，就使用'calc（）'而言，请务必确保在操作员的任一侧留出空间，例如'calc（100％ - 180px）;''calc'（100％-180px）;' - 过去几次让我出去... –

谢谢迈克尔:)你减少了我的时间，非常有用信息。事实上，目前它比弹性盒更好。 –

答

你真的必须设置2行绝对？尝试将包装物高度按％折叠，以免给row2 180 px，给它5％的高度并删除绝对定位，并给出第1行高度95％

使行占用高度上的剩余空间

相关推荐