如何使div填充高度，直到下一個絕對定位元素

Question

如何使div填充父級頂部到下一個絕對底部定位元素頂部之間的整個高度？

看到這裏codepen：http://codepen.io/LouisDoe/pen/vGLJVB

<div class="wrapper"> 
    <div class="maxHeight"> 
    blabla 
    </div> 
    <div class="content"> 
    <div>row 1</div> 
    <div>row 2</div> 
    <div>row 3</div> 
    </div> 
</div> 

CSS：

.content { position:absolute; bottom:0; width:100%; } 

我想打

<div class="maxHeight"> 
</div> 

全部可用高度。

感謝

Answer 1

您可以使用Flexbox。如果您在.wrapper上設置min-height: 100vh，它將佔用窗口的全部高度。在.maxHeight上flex: 1，該元素將剩餘高度並將.content div推到窗口的底部。

* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.wrapper { 
 
    min-height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.maxHeight { 
 
    flex: 1; 
 
    background: lightgreen; 
 
} 
 

 
.content div { 
 
    padding:10px; 
 
    border-top: 1px solid #D1D1D1; 
 
}

<div class="wrapper"> 
 
    <div class="maxHeight">blabla</div> 
 
    <div class="content"> 
 
    <div>row 1</div> 
 
    <div>row 2</div> 
 
    <div>row 3</div> 
 
    </div> 
 
</div>

Answer 2

問題:-(

的position:absolute;的全部目的就是要「拉」的元素從頁面的流量，所以不存在「可用高度」，因爲絕對定位的元素沒有按」 t拍攝它的父元素的任何地方。

你可以做到這一點使用JavaScript的通過編程計算父元素的高度，並從中減去底部定位元素的高度...

編輯：

考慮到你的HTML，你可以像這樣同時設置.maxHeight和.content元素是position:absolute;，不同bottom & height值：

.content { 
    bottom:0; 
    height:150px; 
} 
.maxHeight { 
    top:0; 
    bottom:150px; 
} 

這不是動態的，但將實現你想要什麼。

Answer 3

聽起來像是你正在嘗試做一個棘手的頁腳....

是這樣的：http://ryanfait.com/sticky-footer/

Answer 4

也許你要檢查這個js的解決方案：jsfiddle

CSS：

.wrapper {position: relative; height: 100%;} 
html, body {height: 100%;} 

jQuery：

$(document).ready(function(){ 
    wrapperHeight = $(".wrapper").height(); 
    contentHeight = $(".content").height(); 
    $(".maxHeight").height(wrapperHeight-contentHeight); 
});