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

一尘不染

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

css

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

我创建了一个jsFiddle来解释这种情况

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%;

}


<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>

谢谢你们

阅读 201

2020-05-16

共1个答案

一尘不染

body默认情况下，标签的边距取决于浏览器（例如chrome），margin:8px您必须通过

body{
  margin:0;
}

2020-05-16