使第二行的flex项目占据容器的剩余高度

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>

- naughty boy

Answer 1

不需要在您的flex项目上使用height, min-height或calc

• 不需要绝对定位
• 浮动无效，因为在flex布局上下文中忽略浮动

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

修订版的Codepn

- Michael Benjamin

---

是的，唯一的修改是设置了最小高度，这样当没有内容时它就不会折叠，而且它运作得很好。谢谢。http://codepen.io/markt5000/pen/RaVRqX?editors=1100 - naughty boy

请发布一个 CodePen 来说明问题，或者考虑发布一个新的问题。@eric99 - Michael Benjamin

刚把一些 Lorem Ipsum 段落复制到 .content 中，这里是penn。我看到的问题是滚动条在 html 上，会将页眉滚动到页面之外（在绝对定位中不会发生这种情况），但是在 html 上隐藏滚动条并在 content 或 nested-flex-container 上启用它并不起作用 - 内部元素上没有滚动条。 - user8745435

我想我知道原因了。但是我现在在移动设备上，无法测试。当我回到桌面电脑时，我会再联系你的。 - Michael Benjamin

但是看看这个。https://dev59.com/mVoV5IYBdhLWcg3wc-Ym @eric99 - Michael Benjamin

Answer 2

这是你想要的吗？http://codepen.io/Shambolaz/pen/xVdVyd

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

- Ber

---

不，问题在于我无法设置 .row 的高度，因为标题栏的高度是可调整的（由于其内容），将高度设置为 90% 意味着标题栏应该恰好占据屏幕的 100%。 - naughty boy

简单来说，页头将具有高度x，而包装器应该具有其余的高度以覆盖视口中剩余的100％高度。在内容大于包装器的情况下，包装器应该拉伸以适应内容，侧边栏也应如此。 - naughty boy

Answer 3

当内容大于其元素时，为了获得真正的“固定位置”行为，请将overflow: auto添加到内容元素。

还要确保所有父级内容元素的高度具体指定。

我的意思是必须有一个祖先元素具有指定的高度（固定像素或100vh）。

Stack Overflow将片段放在iFrame中，该iFrame具有固定高度的父级，因此使用height: 100％的元素有东西可以计算。

因此，我们只需向内容div添加height: 100％，滚动条就会显示在那里。

这是修改后的pen（也具有固定高度的祖先）。您可以通过在各个点删除height CSS规则来进行实验，并查看滚动条向上移动元素树的情况。

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

.outer-flex-container {
  display: flex;
  flex-direction: column;  
  height: 100%;
}

.header {
  height: 80px;            
  background-color: orange;
}

.nested-flex-container {
  display: flex;          
  flex: 1;
}

.sidebar {
  flex-basis: 20%;       
  background-color: aqua;
}

.content {
  flex: 1;                
  background: magenta;
  overflow-y: auto;     
  height: 100%;
}

<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">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Porttitor eget dolor morbi non arcu risus quis varius quam. Commodo viverra maecenas accumsan lacus. Vitae elementum curabitur vitae nunc sed velit dignissim. Auctor urna nunc id cursus metus aliquam eleifend. Bibendum ut tristique et egestas. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Diam maecenas ultricies mi eget mauris pharetra et. Ultricies mi eget mauris pharetra. Nibh mauris cursus mattis molestie.
            <br/>
            Urna neque viverra justo nec ultrices dui sapien. Diam vulputate ut pharetra sit amet aliquam id diam maecenas. Nunc non blandit massa enim nec dui nunc. Amet mattis vulputate enim nulla. Nisl condimentum id venenatis a condimentum vitae sapien. Magna sit amet purus gravida quis blandit turpis. Sed turpis tincidunt id aliquet risus. Aliquet lectus proin nibh nisl condimentum id venenatis a. Vitae purus faucibus ornare suspendisse sed. Sit amet commodo nulla facilisi nullam. Egestas fringilla phasellus faucibus scelerisque eleifend. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Viverra adipiscing at in tellus integer feugiat. Scelerisque eu ultrices vitae auctor eu augue. At urna condimentum mattis pellentesque.
            <br/>
            Quisque id diam vel quam elementum pulvinar etiam non quam. Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur. Diam quis enim lobortis scelerisque fermentum dui. Tortor id aliquet lectus proin nibh. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus. Egestas fringilla phasellus faucibus scelerisque. Venenatis a condimentum vitae sapien pellentesque habitant. Quis vel eros donec ac odio tempor orci. Ultrices sagittis orci a scelerisque. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Dis parturient montes nascetur ridiculus mus mauris. Nisl vel pretium lectus quam id leo in vitae. Euismod elementum nisi quis eleifend quam adipiscing vitae. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Urna porttitor rhoncus dolor purus non. Lobortis mattis aliquam faucibus purus in massa tempor nec. Risus pretium quam vulputate dignissim suspendisse in. Malesuada bibendum arcu vitae elementum curabitur. Quisque id diam vel quam elementum pulvinar. A erat nam at lectus urna duis convallis.
            <br/>
            Nulla facilisi nullam vehicula ipsum. Nibh ipsum consequat nisl vel pretium lectus quam id leo. Morbi tristique senectus et netus et malesuada fames ac turpis. Quis imperdiet massa tincidunt nunc pulvinar sapien. Amet volutpat consequat mauris nunc congue nisi vitae. Feugiat sed lectus vestibulum mattis ullamcorper. Pharetra magna ac placerat vestibulum lectus. Sed faucibus turpis in eu mi bibendum neque egestas. A condimentum vitae sapien pellentesque habitant. Mi bibendum neque egestas congue quisque egestas diam. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Lacus luctus accumsan tortor posuere ac ut.
            <br/>
            Sit amet cursus sit amet dictum. Sem integer vitae justo eget magna fermentum iaculis eu non. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Facilisis gravida neque convallis a cras semper. Nullam vehicula ipsum a arcu. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Et odio pellentesque diam volutpat commodo sed egestas egestas. Velit aliquet sagittis id consectetur. Faucibus vitae aliquet nec ullamcorper. In iaculis nunc sed augue lacus viverra. Vitae semper quis lectus nulla at volutpat diam ut venenatis. Et malesuada fames ac turpis. Felis imperdiet proin fermentum leo vel. Fringilla est ullamcorper eget nulla facilisi etiam dignissim. Quis varius quam quisque id diam vel quam. Ornare arcu dui vivamus arcu felis bibendum ut. Turpis massa sed elementum tempus egestas sed. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Arcu ac tortor dignissim convallis aenean et tortor.
          </div><!-- inner flex item #2 -->
    
     </div><!-- close inner flex container -->

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

- user8745435