DIv заполнение повторного вертикального пространства, даже с div выше имеет динамическую высоту?

Question

Вот моя скрипка:

http://jsfiddle.net/nom4mxLt/

<div id="wrapper"> 
    <div id="yellow">variable height (I put 200px but can change in realtime)</div> 
    <div id="red">This one should fill all remaining space, even when yellow resizes</div> 
</div> 

html, body { 
    width:100%; 
    height:100%; 
    margin:0; 
} 
#wrapper { 
    width:100%; 
    height:100%; 
    position:relative; 
} 
#yellow { 
    width:100%; 
    height:200px; 
    background-color:yellow; 
} 
#red { 
    position:absolute; 
    top:200px; 
    bottom:0; 
    min-height;250px; 
    left:0; 
    width:100%; 
    background-color:red; 
} 

Это хорошо работает, когда желтая полоса имеет статическую высоту, что не так в моей работе.

(без использования JS пожалуйста!)

Answer 1

вы можете использовать гибкий для этого вида макета:

html, body { 
 
    width:100%; 
 
    height:100%; 
 
    margin:0; 
 
} 
 
#wrapper { 
 
    display:flex; 
 
    flex-flow:column; 
 
    height:100%; 
 
} 
 
#yellow { 
 
    width:100%; 
 
    background-color:yellow; 
 
} 
 
#red {flex:1;/* i will use whole space avalaible remaining in the flex direction of my parent */ 
 
    background-color:red; 
 
}

<div id="wrapper"> 
 
    <div id="yellow">variable height <br/> any height but maybe a max-height could come handy to avoid red one to disseapear</div> 
 
    <div id="red">This one should fill all remaining space, even when yellow resizes</div> 
 
</div>

Чтобы позволить обертка расти, то мин-высота может прийти также полезно

html, body { 
 
    width:100%; 
 
    height:100%; 
 
    margin:0; 
 
} 
 
#wrapper { 
 
    display:flex; 
 
    flex-flow:column; 
 
    min-height:100%; 
 
} 
 
#yellow { 
 
    background-color:yellow; 
 
} 
 
#red {flex:1;/* i will use whole space avalaible remaining in the flex direction of my parent */ 
 
    background-color:red; 
 
}

<div id="wrapper"> 
 
<h1>test and resize me in full page mode </h1> 
 
    <div id="yellow"> variable height <br/> any height<br/> but maybe a max-height<br/> could come handy <br/>to avoid red one to disseapear<br/> or min-heigh on wrapper</div> 
 
    <div id="red">This <br/>one <br/>should fill <br/>all remaining space,<br/> even when yellow resizes</div> 
 
</div>

Здесь также некоторые полезно Ressource на гибком: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

Вы можете использовать flexbox с align-items: stretch

http://jsfiddle.net/nom4mxLt/3/

html, body { 
 
    width:100%; 
 
    height:100%; 
 
    margin:0; 
 
} 
 
#wrapper { 
 
    width:300px; 
 
    height:100%; 
 
    position:relative; 
 
    display: flex; 
 
    flex-flow: column; 
 
} 
 
#first { 
 
    width:300px; 
 
    height:300px; 
 
    background-color:#F5DEB3; 
 
} 
 
#second { 
 
    background-color:red; 
 
    flex-grow:1; 
 
}

<div id="wrapper"> 
 
    <div id="first"></div> 
 
    <div id="second"></div> 
 
</div>