Как сделать 100% высоту внутри div?

Question

<div id="a"> 
    <div style="background-color: green;">content above blue div</div> 
    <div id="b">I want this as height as the #a<br /> and if bigger, I want to get<br /> scrollbars</div> 
</div> 

#a 
{ 
    height: 100px; 
    background-color: yellow; 
} 

#b 
{ 
    background-color: blue; 
} 

Fiddle: http://jsfiddle.net/29ao3oLq/1/

содержание в голубом DIV может быть больше, и я хочу быть в высоту, как желтый DIV в настоящее время. Но я не знаю высоты, потому что есть зеленый div с неизвестной высотой.

Answer 1

Если вы добавите пару элементов-оберток, вы можете реализовать этот макет с помощью таблиц CSS.

Возможно, вам понадобится изменить это, если ваш контент очень длинный (для появления полос прокрутки).

#a { 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: yellow; 
 
    display: table; 
 
} 
 
#b { 
 
    background-color: blue; 
 
    height: 100%; 
 
} 
 
#a div.row { 
 
    display: table-row; 
 
} 
 
#a div.row div { 
 
    display: table-cell; 
 
}

<div id="a"> 
 
    <div class="row r1"> 
 
    <div style="background-color: green;">content above blue div<br>more stuff</div> 
 
    </div> 
 
    <div class="row r2"> 
 
    <div id="b">I want this as height as the #a 
 
     <br />and if bigger, I want to get 
 
     <br />scrollbars</div> 
 
    </div> 
 
</div>

Answer 2

Этот CSS, используя Flexbox должны это сделать.

#a 
{ 
    height: 100px; 
    background-color: yellow; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; /* align items in Main Axis */ 
    align-items: stretch; /* align items in Cross Axis */ 
    align-content: stretch; /* Extra space in Cross Axis */  

} 

#c 
{ 
    background-color: green; 

} 

#b 
{ 
    background-color: blue; 
    overflow: auto; 
    flex: 1; 
} 

Маленькая адаптация к HTML:

<div id="a"> 
    <div id="c" >content above blue div</div> 
    <div id="b">I want this as height as the #a<br /> and if bigger, I want to get<br /> scrollbars<br /> scrollbars<br /> scrollbars<br /> scrollbars<br /> scrollbars<br /> scrollbars<br /> scrollbars</div> 
</div> 

Подробнее: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Посмотри: http://jsfiddle.net/29ao3oLq/3/

Ура!