您的位置: 首页  >  技术问答  >  Doctype打破了Flexbox的布局

Doctype打破了Flexbox的布局

分类: 技术问答 • 2022-06-05 20:38:03
问题描述：

当我在页面顶部添加声明时，我的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:

相关推荐