如何使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); 
});