Сделать гибкие элементы во втором ряду взять оставшуюся высоту контейнера

Question

Я пытаюсь создать макет с заголовком сверху, под ним боковая панель и основное содержимое.

Я хотел бы иметь боковую панель, а просмотр содержимого займет вертикальное пространство, оставленное заголовком. Проблема в том, что заголовок может динамически изменяться, поэтому я не могу выполнить команду calc(). Мое решение заключалось в использовании схемы flexbox.

Я разделил видовое окно горизонтально на две части. Один из них - это заголовок, а один - оболочка для боковой панели и основного содержимого.

Боковая панель плавает влево и получает процент от ширины, а содержимое плавает вправо и дает остальное.

Проблема в том, что я пытаюсь сделать боковую панель всегда 100% -ной высотой обертки.

Я пробовал height: 100% и min-height: 100%, но это не работает.

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

Вот моя ручка: http://codepen.io/markt5000/pen/JXNXpW

Как вы можете видеть оранжевый заголовок и красное пространство обертки с боковой панелью и содержанием.

здесь является расположение

<div class="header"> 
</div> 

<div class="row"> 

    <div id="sidebar"> 
    </div> 

<div id="main-content"> 
</div> 

</div> 

Answer 1

Там нет необходимости:

• height, min-height или calc на ваши вопросы сгибают
• абсолютного позиционирования
• поплавков (на самом деле, они бесполезны, потому что floats are ignored in a flex formatting context)

Свойства Flex обладают всеми возможностями, необходимыми для работы макета. Ключ состоит в том, чтобы использовать flex: 1, чтобы элементы расширяли всю доступную длину контейнера.

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

Вот ваш код с некоторыми изменениями:

html { height: 100%; } 
 

 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.outer-flex-container { 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; /* main flex container stacks items vertically */ 
 
} 
 

 
.header { 
 
    height: 80px;   /* demo purposes; from your original code */ 
 
    background-color: orange; 
 
} 
 

 
.nested-flex-container { 
 
    display: flex;   /* inner flex container stacks items horizontally */ 
 
    flex: 1;     /* KEY RULE: tells this second flex item of main container 
 
            to consume all available height */ 
 
    align-items: stretch; /* KEY RULE: default setting. No need to include. Tells 
 
            children to stretch the full length of the container 
 
            along the cross-axis (vertically, in this case). */ 
 
} 
 

 
.sidebar { 
 
    flex-basis: 20%;  /* set width to 20% */ 
 
    background-color: aqua; 
 
} 
 

 
.content { 
 
    flex: 1;    /* set width to whatever space remains */ 
 
    background: magenta; 
 
}

<div class="outer-flex-container"> 
 

 
    <div class="header">HEADER</div><!-- main flex item #1 --> 
 

 
    <div class="nested-flex-container"><!-- main flex item #2 --> 
 
    
 
      <div class="sidebar">SIDEBAR</div><!-- inner flex item #1 --> 
 
    
 
      <div class="content">MAIN CONTENT</div><!-- inner flex item #2 --> 
 
    
 
    </div><!-- close inner flex container --> 
 

 
</div><!-- close outer flex container -->

Revised Codepn

Answer 2

Это то, что вы собираетесь? http://codepen.io/Shambolaz/pen/xVdVyd

.view .row 
{ 
    flex: 1 1 auto; 
    background:red; 
    height: 90%; 
}