Question

我使用的是一个简单的布局，有三个100％宽度和高度的部分。它们在Firefox和IE中按预期工作，但在Chrome中不能。

以下是我使用的代码：

html,body{width: 100%;height: 100%;}
section{width: 100%;height: 100%;}
.section-bg{width: 100%;height: 100%;}

.section-bg是一个应该保存内容的div。如果有人有兴趣，这是link生活示例。

另外，我忘了提到通过使用chrome工具检查，似乎auto的高度应用于html元素。当然将此设置为100％，可以使Chrome中的一切正常。

Answer 1

你说chrome正在覆盖你的CSS吗？

所以使用：

html,body{
  width: 100% !important;
  height: 100% !important;
}
section{
  width: 100% !important;
  height: 100% !important;
}
.section-bg{
  width: 100% !important;
  height: 100% !important;
}

确保浏览器不会覆盖您的CSS。

Answer 2

那是registered Chrome bug。我的解决方法是下一步使用flexbox：

body{
  display: flex;
  flex-direction: column;
}
section {
  flex:1 0 0px;
}

和webkit的问题：

@media all and (-webkit-min-device-pixel-ratio:0) { /* ...write webkit styles here*/ }

100％高度部分适用于Firefox，IE，但不适用于Chrome

2 个答案: