Как сделать 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. Если вы установили min-height: 100vh на .wrapper, это займет всю высоту окна. И с flex: 1 на .maxHeight, этот элемент займет остальную оставшуюся высоту и нажмите .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; должен «тянуть» элемент из потока страницы, так что нет «доступна высота», так как абсолютно позиционирован элемент Безразлично» т занять любое место своего родительского элемента.

Вы можете добиться этого с помощью JavaScript по программно вычислить высоту родительского элемента, и вычитает высоту нижнего позиционируемого элемента от него ...

EDIT:

Учитывая ваш 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); 
});