我想使用flexbox使用全高应用程序.我在这个链接中使用旧的flexbox(显示:框;以及其他东西)找到了我想要的东西:CSS3 Flexbox全高应用和溢出
对于旧版本的flexbox css属性,这是一个正确的解决方案.
如果我想尝试使用较新的flexbox属性,我将尝试在同一链接中使用第二个解决方案,但使用高度为0px的容器 "黑客"弹性框; 它使显示垂直滚动.
我不喜欢它,因为它引入了其他问题,它更像是一个解决方案而不是解决方案.
我准备了一个基本示例的jsfiddle:http://jsfiddle.net/ch7n6/
html, body {
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
#container article {
flex: 1 1 auto;
overflow-y: scroll;
}
#container header {
background-color: gray;
}
#container footer {
background-color: gray;
}它是一个"全高html网页",由于内容元素的flexbox,页脚位于底部.我建议你在css代码和结果之间移动吧来模拟不同的高度.
Jos*_*abo 161
感谢/sf/users/115707371/给了我答案.
解决方案是为垂直可滚动元素设置高度.例如:
#container article {
flex: 1 1 auto;
overflow-y: auto;
height: 0px;
}
元素将具有高度,因为flexbox会重新计算它,除非你想要一个最小高度,所以你可以使用height:100px; 它完全相同:min-height:100px;
#container article {
flex: 1 1 auto;
overflow-y: auto;
height: 100px; /* == min-height: 100px*/
}
因此,如果您想在垂直滚动中使用最小高度,那么这是最佳解决方案:
#container article {
flex: 1 1 auto;
overflow-y: auto;
min-height: 100px;
}
如果您只想要完整的垂直滚动,以防没有足够的空间来查看文章:
#container article {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}
最终代码:http://jsfiddle.net/ch7n6/867/
Xan*_*hir 55
这里有Flexbox规范编辑器.
这是一个鼓励使用flexbox,但有一些事情你应该调整以获得最佳行为.
不要使用前缀.大多数浏览器都支持未加固定的flexbox.始终以无前缀开头,只在必要时添加前缀以支持它.
由于你的页眉和页脚不是为了弯曲,它们都应该flex: none;设置它们.由于一些重叠的效果,你现在有类似的行为,但你不应该依赖它,除非你想在以后偶然混淆自己.(默认是flex:0 1 auto,因此它们从它们的自动高度开始并且可以缩小但不会增长,但它们也是overflow:visible默认的,这会触发它们的默认值min-height:auto以防止它们缩小.如果你曾经设置overflow它们,那么min-height:auto变化的行为(切换到零而不是最小内容)他们会突然被超高<article>元素压扁.)
你也可以简化<article> flex- 只需设置flex: 1;就可以了.尝试坚持使用https://drafts.csswg.org/css-flexbox/#flex-common中的常用值,除非您有充分的理由做一些更复杂的事情 - 它们更容易阅读并涵盖大部分行为你想要调用.
cim*_*non 20
目前的规范说明了这一点flex: 1 1 auto:
根据
width/height属性调整项目的大小,但使它们完全灵活,以便它们沿主轴吸收任何自由空间.如果所有的项目要么flex: auto,flex: initial或者flex: none,该项目已被大小后的任何积极的自由空间将被平均分配到与项目flex: auto.
http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common
听起来,如果你说一个元素是100px高,它被视为更像"建议"的大小,而不是绝对的.因为它允许缩小和增长,所以它占用的空间比允许的多.这就是为什么将这一行添加到"main"元素的工作原理:( height: 0或任何其他小数字).