使行佔用高度上的剩餘空間

.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/

來源

2015-06-29 skrln

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>

來源

2015-06-29 12:34:23

值得一提的是，對calc（）的瀏覽器支持不是100％。如果您需要支持IE8和較舊的Android瀏覽器，則會遇到問題。請參閱http://caniuse.com/#feat=calc。不過，這比flexbox有更好的支持，因此可能是最好的選擇。另外，就使用'calc（）'而言，請務必確保在操作員的任一側留出空間，例如'calc（100％ - 180px）;''calc'（100％-180px）;' - 過去幾次讓我出去... –

謝謝邁克爾:)你減少了我的時間，非常有用信息。事實上，目前它比彈性盒更好。 –

你真的必須設置2行絕對？嘗試將包裝物高度按％摺疊，以免給row2 180 px，給它5％的高度並刪除絕對定位，並給出第1行高度95％

來源

2015-06-29 12:47:12 KAD

使行佔用高度上的剩餘空間

回答

相關問題