Question

我尝试使用100vh和100vw创建一个全高和全宽的html页面。我希望内容区域周围有2em边距，内容区域边缘内有2em填充。

这似乎是一件很简单的事情，但由于某种原因，即使<body>和<html>没有边距或填充，<body>位置也会从视口顶部移动2em并设置为全宽和高度。

<div id="content">
  <div class="app">
    <h3>Hello World</h3>
    <p>Why is the body not at the top of the viewport?</p> 
  </div>
</div>

样式：

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}

#content {
  background-color: #999;  
  height: 100vh;
  width: 100vw;
}

.app {
  background-color: white;
  height: calc(100vh - 4em);
  width: calc(100vw - 4em);
  margin: 2em;
}

请注意，内容区域会滚动。应该没有滚动。这是一个实例： http://codepen.io/tauren/pen/MpeBdx

我错过了什么？

Answer 1

这是因为折叠边距，您可以在此处阅读Mastering margin collapsing

在你的情况下，简单地说，你给.app的余量增加了给#content的高度，因此滚动发生。

将overflow: hidden;添加到#content类是解决该问题的一种方法

#content {
  background-color: #999;  
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

Updated codepen

Answer 2

.app有2em的余量：

.app {
 background-color: white;
 height: calc(100vh - 4em);
 margin: 2em;
 width: calc(100vw - 4em);
}

更新：

从.app中删除边距，只需在#content

中添加2em填充

Answer 3

将display: inline-block;添加到.app

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}

#content {
  background-color: #999;  
  height: 100vh;
  width: 100vw;
}

.app {
  background-color: white;
  height: calc(100vh - 4em);
  width: calc(100vw - 4em);
  margin: 2em;
  display: inline-block;
}

Answer 4

.app和h3也有边距

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}

#content {
  background-color: #999;  
  height: 100vh;
  width: 100vw;
}

.app {
  background-color: white;
  height: calc(100vh - 4em);
  width: calc(100vw - 4em);
  margin: 0 2em 2em 2em;
}

h3{
  margin-top : 0;
}

Answer 5

从.app中删除边距并将2em填充添加到#content

Answer 6

尝试添加

 border-top: 1px solid gold !important;
  margin-top: -1px !important;

到您的内容。工作CODEPEN

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;

}

#content {
  background-color: #999;  
  height: 100vh;
  width: 100vw;
   border-top: 1px solid gold !important; /*MODIFICATION*/
  margin-top: -1px !important; /*MODIFICATION */
}

.app {
  background-color: white;
  height: calc(100vh - 4em);
  width: calc(100vw - 4em);
  margin: 2em;
}

＆＃13;

<div id="content">
  <div class="app">
    <h3>Hello World</h3>
    <p>Why is the body not at the top of the viewport?</p> 
  </div>
</div>

＆＃13;

全高视口顶部的间隙

6 个答案: