html – Doctype中断flexbox布局

概述参见英文答案 > “Height=100%” is not working in html when using <!DOCTYPE>?                                    3个 >             Why does my div height 100% work only when DOCTYPE is removed?                  参见英文答案 > “Height=100%” is not working in html when using <!DOCTYPE>?                                    3个
>             Why does my div height 100% work only when DOCTYPE is removed?                                    5个
当我在页面顶部添加声明时,我的flexBox布局将崩溃,当我删除DOCTYPE时,它按预期工作. 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 >  <div >    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>  </div>  <div >    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>  </div></div>

https://plnkr.co/edit/jKklf2zeYBjOgTsSQnvr

应该是什么样的：

解决方法 包含DOCTYPE并将其添加到CSS：

HTML,body { height: 100%; }

使用百分比高度时,必须为所有父元素指定一个高度,包括根元素.在这里阅读更多：

> Working with the CSS height property and percentage values

当您删除DOCTYPE时,浏览器进入quirks模式并在父项高度为auto时解析元素相对于视口的百分比高度.在这里阅读更多：

> CSS height property,percentage values & DOCTYPE

总结

以上是内存溢出为你收集整理的html – Doctype中断flexbox布局全部内容，希望文章能够帮你解决html – Doctype中断flexbox布局所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。