Question

我在使用Chrome时发现我的网站样式没有更改代码。尽管如此，当我用Firefox和Safari确认时，它运行良好，我记得它在我更新Chrome之前也有效。

我试图弄清楚这会导致什么，但不能。

table {
  height: 100%;
}

td {
  height: 100%;
  background: none repeat scroll 0 0 #565656;
  vertical-align: top;
}

.td-inner {
  height: 100%;
  background: none repeat scroll 0 0 #e1e1e1;
}

代码是否有错误，或者这是Chrome的css解释方式？

Answer 1

我在Firefox中对此进行了测试，看起来与chrome相同，但我认为这将解决潜在的问题。

当你使用一个百分比时，如果父母的身高是100px并且你将孩子的身高设置为100％那么孩子的身高将是100px，你就会说这是你的父母。

在这种情况下.table_root，table的父母，只是占用了所需的空间。

您可以通过将HTML，body和.table_root设置为100％来解决此问题，这将占用屏幕的100％。或者，您可以使用vh而不是％vh viewport height 100vh等于视口高度的100％。

％

示例

＆＃13;

body, html {
  height: 100%;
  margin: 0;
}

div {
  height: 100%;
  background: tomato;
}

＆＃13;

<div>100% example</div>

＆＃13;

示例vh

＆＃13;

body {
  margin: 0;
}

div {
  height: 100vh;
  background: tomato;
}

＆＃13;

<div>vh example</div>

＆＃13;

我希望这会有所帮助

Answer 2

将html / body和.table_root设置为100％可以解决问题。

body,html {
  height: 100%;
}

.table_root {
  height: 100%;
}

https://jsfiddle.net/3ttou4jv/2/

div高度百分比不适用于Chrome 63

2 个答案: