Question

我目前正在使用React，我遇到的问题是让div等于页面高度的100％。最初，我有一个问题，身体上方总共有大约24px的空白空间。无论怎样，我都无法适应它。我最终在app.css上使用了这个（重置）

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

它解决了问题，但是，100％或100vh的测量值实际上并不等于总视图的100％。以下是该页面的屏幕截图：

https://gyazo.com/3407b6bd0032f402f3bb97acdb725e40

蓝色div是一个填充100vh的div。然而，它并没有完全填满页面。我也尝试了100％。

蓝色div：

.loginWrapper {
  margin-left: 260px;
  height: 100vh;
  background-color: #29B6F6;
}

我注意到html有这样的样式，但即使删除也没有明显的变化：

html {
    box-sizing: border-box;
}

如果有人可以解释这个现象，我将非常感激。如果您需要任何额外信息，请告诉我。谢谢！

Answer 1

如果从html和其他顶级标签应用，则必须重置基本边距和填充。

body, html {margin: 0;padding: 0;}

或者只使用reset.css

之类的东西

http://meyerweb.com/eric/tools/css/reset/

Answer 2

margin标记上有默认body，大约为8px。既然你提到它大概是24px，那么我想额外的空间距可能来自collapsing margins。例如<h1>内有<div>个标记，margin上的默认22px大约h1显示在容器外部，也可能是任何其他标题标记，或p，ul等，这些标记来自浏览器的默认边距。下面的简单演示，请参阅粉色区域，即边距。

＆＃13;

body {background:pink;}
div {
  height: 100vh;
  background-color: #29B6F6;
}

＆＃13;

<div>
  <h1>Test</h1>
</div>

＆＃13;

您只需将margin重置为0即可解决此问题，并使用padding代替间距。或者，在容器etc上应用overflow:hidden;。

＆＃13;

body {background:pink;}
body, h1 {
  margin: 0;
}
div {
  height: 100vh;
  background-color: #29B6F6;
}

＆＃13;

<div>
  <h1>Test</h1>
</div>

＆＃13;

为什么100vh不填满整页？

2 个答案: