参见英文答案 >
Chrome / Safari not filling 100% height of flex parent4个
我是FlexBox的新手,我正在尝试用它来创建一个带有固定页眉,固定页脚和填充页眉和页脚之间可用空间的内容区域的布局.内容区域是一个可滚动区域,有3个面板(div),每个面板的高度为100%.出于演示目的,我将a,b,c(在其中将它们称为Panel a,Panel b和Panel c)文本放在每个面板的顶部.
我是FlexBox的新手,我正在尝试用它来创建一个带有固定页眉,固定页脚和填充页眉和页脚之间可用空间的内容区域的布局.内容区域是一个可滚动区域,有3个面板(div),每个面板的高度为100%.出于演示目的,我将a,b,c(在其中将它们称为Panel a,Panel b和Panel c)文本放在每个面板的顶部.
在Firefox v39中,面板a,b和c占据了可滚动容器的整个高度.
在Safari(v 8.0.6(10600.6.3))中,每个面板的高度都比容器高一点.如果滚动到最后一个面板(面板c),当内容完全滚动时,标题“c”不再显示. Firefox不是这种情况.
我想要的行为是Firefox中的行为.
这是codepen.
<head lang="en"> <Meta charset="UTF-8"> <title>Sample</title> <style> html,body { height: 100%; width: 100%; font-size: 100%; margin: 0px; font-family:open-sans; font-style: normal; font-weight: 400; } *,*:before,*:after{ -webkit-Box-sizing: border-Box; -moz-Box-sizing: border-Box; -ms-Box-sizing: border-Box; Box-sizing: border-Box; } </style> </head> <body> <div style="height: 100%; width: 100%; ;display: -webkit-flex; display: flex; -webkit-flex-flow: column; flex-flow: column;"> <div style="width:100%; min-height: 50px;"> header<br>header<br>header<br> </div> <div style="display: -webkit-flex; display: flex; -webkit-flex-flow: column; flex-flow: column; width:100%; height: 100%; -webkit-flex: 1 1 auto; flex: 1 1 auto; -ms-flex: 1 1 auto; "> <div style="overflow-y: auto; width:100%; height: 100%; border:red solid thin"> <div style="width:100%; height: 100%; border:green solid thin"> a </div> <div style="width:100%; height: 100%; border:green solid thin"> b </div> <div style="width:100%; height: 100%; border:green solid thin"> c </div> </div> </div> <div style=" min-height:30px; border:blue solid thin;"> footer </div> </div> </body>
谢谢.
解决方法
原文地址:https://www.jb51.cc/css/214809.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。