gpt4 book ai didi

html - 另一个 flexbox 里面的 Flexbox?

转载 作者:太空狗 更新时间:2023-10-29 15:59:12 31 4
gpt4 key购买 nike

我正在尝试让一个 flexbox 在 flexbox 内部工作。当第一个(包装)flexbox 工作时,里面的那个什么都不做。无论如何让这个工作?

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

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

最佳答案

你快到了。仅两步之遥:

  1. 使 #body 成为 flex 容器。
  2. 使用 flex: 1.wrapper2 全高。

(我也摆脱了百分比高度。你不需要它们。)

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

完成上述调整后,您可以将内部(红色)页脚固定到底部:

  • flex: 1 on #body2,这是你拥有的,或者
  • margin-bottom: auto#body2 上,或者
  • margin-top: auto#footer2 上,或者
  • justify-content: space-between 在容器上 (#wrapper2)

关于html - 另一个 flexbox 里面的 Flexbox?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42195456/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com