Doctype打破了Flexbox的布局 [英] Doctype breaks flexbox layout
问题描述
当我在页面顶部添加声明时,我的flexbox布局将折叠,而当我删除文档类型时,它会按预期工作.问题发生在chrome/firefox/ie.
When I add the declaration at the top of my page my flexbox layout will collapse, when I remove the doctype it works as expected. Problem occurs in chrome/firefox/ie.
.grid {
height: 100%;
display: flex;
flex-flow: column nowrap;
flex-grow: 1;
border: 1px solid black;
}
.row {
width: 100%;
display: flex;
flex-flow: row nowrap;
flex-grow: 1;
}
.cell {
flex-grow: 1;
border: 1px solid black;
}
<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
https://plnkr.co/edit/jKklf2zeYBjOgTsSQNvr
它应该是什么样的
推荐答案
包括doctype并将其添加到CSS:
Include the doctype and add this to your CSS:
html, body { height: 100%; }
使用百分比高度时,必须为所有父元素(包括根元素)指定一个高度.在此处阅读更多信息:
When using percentage heights, you must specify a height for all parent elements up to and including the root element. Read more here:
当您移除文档类型时,浏览器进入怪异模式,并在父级的高度为auto
时解析元素相对于视口的高度百分比 .在此处阅读更多信息:
When you remove the doctype the browser enters quirks mode and resolves an element's percentage height relative to the viewport when the parent's height is auto
. Read more here:
这篇关于Doctype打破了Flexbox的布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!