使第二行的Flex项目取得容器的剩余高度 [英] Make flex items on second row take remaining height of container

问题描述

我正在尝试创建一个顶部有标题的布局，下面有一个侧边栏和主要内容。

我想要边栏和内容查看接管标题留下的垂直空间。问题是头可以动态地重新大小，所以我不能执行 calc（）。我的解决方案是使用flexbox方案。

我将视口水平分为两部分。一个是标题，一个是侧边栏和主要内容的包装。

侧栏向左浮动并给出宽度的百分比，内容正确地浮动并给予其余部分。

问题是我试图让侧边栏总是100％的包装高度。

我试过身高：100％和最小身高：100％但这些都不起作用。

我不想绝对定位它，因为如果包装与主要内容溢出，侧边栏不会展开因此。

这是我的笔： http：/ /codepen.io/markt5000/pen/JXNXpW

正如您所看到的橙色是标题，红色空间是包含侧边栏和内容。

这里是布局

 < div class =header> 
< / div> 
 
< div class =row> 
 
< div id =sidebar> 
< / div> 
 
< div id =main-content> 
< / div> 
 
< / div> 
  

解决方案

不需要：

• 高度， min-height 或 calc 您的弹性项目


• 绝对定位


• 浮动（事实上，它们是无用的，因为
  

Flex属性具有您需要的所有功能，使布局工作。关键是使用 flex：1 使项目扩展容器的全部可用长度。

标题的高度可以是动态的，边栏和主要内容可以消耗任何高度。没有滚动条。

以下是您的代码，其中包含一些修订：

  html {height：100％; } body {height：100％;保证金：0; padding：0;}。outer-flex-container {height：100％;显示：flex; flex-direction：列; / *主flex容器垂直堆叠物品* /}。header {height：80px; / *演示目的;从你原来的代码* / background-color：orange;}。nested-flex-container {display：flex; / *内部柔性容器水平堆叠物品* / flex：1; / * KEY RULE：告诉主容器的第二个flex项目消耗所有可用的高度* / align-items：stretch; / *键规则：默认设置。无需包含。告诉孩子沿着横轴（在这种情况下是垂直的）拉伸容器的整个长度。 * /}。sidebar {flex-basis：20％; / *设置宽度为20％* / background-color：aqua;}。content {flex：1; / *将宽度设置为任何剩余空间* / background：magenta;}  

 < div class =outer-flex-container> < div class =header> HEADER< / div><！ -  main flex item＃1  - > < div class =nested-flex-container><！ - 主要flex项目＃2  - > < div class =sidebar> SIDEBAR< / div><！ - 内部弹性项目＃1  - > < div class =content>主要内容< / div><！ - 内部弹性项目＃2  - > < / div><！ -  close inner flex container  - >< / div><！ -  close outer flex container  - >  





修改后的Codepn

I am trying to create a layout with a header on top, underneath it a sidebar and the main content.

I would like to have the sidebar and the content view take over the vertical space left by the header. The problem is that the header can dynamically re-size so I cannot perform a calc(). My solution was to use the flexbox scheme.

I divided the viewport horizontally into two parts. One is the header and one is a wrapper for the sidebar and main content.

The sidebar is floated left and given a percentage of the width and the content is floated right and given the rest.

The problem is that I am trying to make the sidebar always be 100% height of the wrapper.

I tried height: 100% and min-height: 100% but these do not work.

I do not wish to absolutely position it since if the wrapper were to overflow with the main content, the sidebar would not expand accordingly.

Here is my pen: http://codepen.io/markt5000/pen/JXNXpW

As you can see the orange is the header and the red space is the wrapper with the sidebar and the content.

here is the layout

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

<div class="row">

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

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

</div>

解决方案

There's no need for:

• height, min-height or calc on your flex items
• absolute positioning
• floats (in fact, they're useless because floats are ignored in a flex formatting context)

Flex properties have all the power you need to make the layout work. The key is to use flex: 1 to make items expand the full available length of the container.

So your header's height can be dynamic and the sidebar and main content can be made to consume whatever height remains. No scrollbars.

Here's your code with some revisions:

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

这篇关于使第二行的Flex项目取得容器的剩余高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！