使第二行的弹性物品占据容器的剩余高度

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在弹性商品上
• 绝对定位
• 浮点数（实际上，它们是无用的，因为在弹性格式上下文中会忽略浮点数）

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 -->

修改后的密码