Question

我在这里非常困惑。由于body是100％（宽度/高度）而main-container也是100％（宽度/高度），为什么会有垂直滚动？

我创建了一个jsFiddle来解释这种情况：http://jsfiddle.net/dcnnvgs1/1/

＆＃13;

body,
html {
  width: 100%;
  height: 100%;
  font-family: "Trebuchet MS !important";
  background-color: #00b3b3;
}

.main-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.main-header {
  background-color: #099;
  height: 10%;
}

.main-footer {
  background-color: #099;
  height: 10%;
}

.main-content {
  background-color: #fff;
  height: 100%;
}

＆＃13;

<body>
  <div class="main-container">
    <div class="main-header">HEADER</div>
    <div class="main-content">jecechejbhcbjbcjrbjb bbjbhbbk</div>
    <div class="main-footer">FOOTER</div>
  </div>
</body>

＆＃13;

谢谢你们

Answer 1

默认情况下，body代码的边距取决于浏览器，例如Chrome中的margin:8px您需要通过

来支持

body{
  margin:0;
}

请参阅更新的fiddle

Answer 2

您必须重置默认的身体边距。

body,html{
width:100%;
height:100%;
font-family:"Trebuchet MS !important";
 background-color:#00b3b3;
  margin:0px; //reset default body margin
}

每个标签都有默认的css属性，这取决于浏览器。

Answer 3

将此添加到您的代码中：

body { margin: 0; }

所有浏览器都有 默认样式表 。它提供了一组基本的样式。

以下是W3C的示例默认样式表：https://www.w3.org/TR/CSS22/sample.html

从样本中可以看出，body { margin: 8px; }是推荐的默认设置。

当您向height: 100%添加边距空间时，会导致溢出。

因此，添加body { margin: 0; }以覆盖默认值。

Answer 4

您不必将体宽设置为100％。它会自动占据整个宽度。

body,html{
 /*width:100%;*/
 height:100%;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-family:"Trebuchet MS !important";
 background-color:#00b3b3;
}

为什么主容器上有垂直滚动？

4 个答案: