Flexbox内的另一个flexbox？ [英] Flexbox inside another flexbox?

问题描述

我试图让Flexbox在Flexbox内工作。当第一个（包装）flexbox工作，里面的一个什么都不做。有没有办法让这个工作？

我想要做的是有效地有两个粘性页脚，并且都有达到页脚的高度。

  html，body {height：100％;保证金：0;填充：0; / *为了避免滚动条* /}＃wrapper {display：flex; / *使用flex模型* / min-height：100％; flex-direction：column; / *了解更多：http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ * /}＃header {background：yellow; height：100px; / *也可以是变量* /} #body {flex：1;边框：1px纯橙色; height：100％：}＃wrapper2 {display：flex; / *使用flex模型* / min-height：100％; flex-direction：column;}＃body2 {border：1px solid purple; flex：1;}＃footer2 {background：red; flex：0;}＃footer {background：lime;}  

< div id =wrapper> < div id =body> Bodyof< br />可变<峰; br />高度<峰; br /> < div id =wrapper2> < div id =body2>嗒嗒< / div> < div id =footer2>无论如何，嗒嗒< / div> < / DIV> < / DIV> < div id =footer>页脚<峰; br />前述< BR />可变<峰; br />高度<峰; br /> < / div>< / div>

JS Fiddle 你几乎在那里。只需两步：

1. 制作 #body 一个弹性容器。 >
   
2. 给 .wrapper2 使用 flex：1 。

（我也摆脱了百分比高度，你不需要它们。）

  body {margin：0;}＃wrapper {display：flex; flex-direction：column; min-height：100vh;}＃header {background：yellow; height：100px;}＃body {flex：1;边框：1px纯橙色;显示：flex; / * new * / flex-direction：column; / * new * /}＃wrapper2 {display：flex; flex-direction：column; flex：1; / * new * /}＃body2 {border：1px solid purple; flex：1;}＃footer2 {background：red;}＃footer {background：lime;}  

 < div id =wrapper> < div id =body> Bodyof< br>变量< br>高度< br> < div id =wrapper2> < div id =body2> blah< / div> < div id =footer2>嗒嗒嗒嗒< / div> < / DIV> < / DIV> < div id =footer>页脚< br>变量< br>高度< br> < / div>< / div>  

=https://jsfiddle.net/np3dnkk2/1/ =nofollow noreferrer> jsFiddle

一次上面的调整是可以的，你可以将内部（红色）页脚固定在下面：

• flex： 1 在＃body2 上，这就是你所拥有的，或者
  
• 保证金-bottom：auto ＃body2 或


• margin-top： auto on ＃footer2 或


• justify-content：space-between （＃wrapper2 ）



I'm trying to get a flexbox working inside a flexbox. While the first (wrapping) flexbox works, the one inside does nothing. Is there anyway to get this to work?

What I'm looking to do is effectively have two sticky footers and have the height of both reach the the footers.

html, body {
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */
}

#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#header {
  background: yellow;
  height: 100px;  /* can be variable as well */
  
}

#body {
  flex: 1;
  border: 1px solid orange;
  height: 100%:
}
#wrapper2 {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;
}
#body2 {
  border: 1px solid purple;
  flex: 1;
}
#footer2 {
  background: red;
  flex: 0;
}

#footer{
  background: lime;
}

<div id="wrapper">
  <div id="body">Bodyof<br/>
    variable<br/>
    height<br/>
    <div id="wrapper2">
    <div id="body2">
    blah
    </div>
    <div id="footer2">
    blah<br />
    blah
    </div>    
    </div>
    </div>
  <div id="footer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>

JS Fiddle

解决方案

You were almost there. Just two steps away:

1. Make #body a flex container.
2. Give .wrapper2 full height with flex: 1.

(I also got rid of percentage heights. You don't need them.)

body {
  margin: 0;
}
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#header {
  background: yellow;
  height: 100px;
}
#body {
  flex: 1;
  border: 1px solid orange;
  display: flex;            /* new */
  flex-direction: column;   /* new */
}
#wrapper2 {
  display: flex;
  flex-direction: column;
  flex: 1;                  /* new */
}
#body2 {
  border: 1px solid purple;
  flex: 1;
}
#footer2 {
  background: red;
}
#footer {
  background: lime;
}

<div id="wrapper">
  <div id="body">
    Bodyof
    <br>variable
    <br>height
    <br>
    <div id="wrapper2">
      <div id="body2">blah</div>
      <div id="footer2">
        blah
        <br>blah
      </div>
    </div>
  </div>
  <div id="footer">
    Footer
    <br>of
    <br>variable
    <br>height
    <br>
  </div>
</div>

jsFiddle

Once the adjustments above are made, you can pin the inner (red) footer to the bottom with:

• flex: 1 on #body2, which is what you have, or
• margin-bottom: auto on #body2, or
• margin-top: auto on #footer2, or
• justify-content: space-between on the container (#wrapper2)

这篇关于Flexbox内的另一个flexbox？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！