Question

<!DOCTYPE html>
<html>
<head>
<style type="text/css">


.parent {
  height: 100vh;
  overflow: auto;
}

.first {
  height: 100vh;
}
.second {
  height: 100vh;
}
</style>
</head>
<body>


<div class="parent">
  <div class="first">
  <h1>haha</h1>
  </div>
  <div class="second">
  <h1>haha</h1>
  </div>
</div>


</body>
</html>

演示：http://codepen.io/anon/pen/zxKmyq

此代码将在左侧显示两个滚动条。

但是，如果我们将代码更改为

<!DOCTYPE html>
<html>
<head>
<style type="text/css">


* {   <!-- this is the only modification I made compared to the first code -->
    margin:0;     
    padding:0;   
}

.parent {
  height: 100vh;
  overflow: auto;
}

.first {
  height: 100vh;
}
.second {
  height: 100vh;
}
</style>
</head>
<body>


<div class="parent">
  <div class="first">
  <h1>haha</h1>
  </div>
  <div class="second">
  <h1>haha</h1>
  </div>
</div>


</body>
</html>

演示：http://codepen.io/anon/pen/gbwBQK

然后只有一个滚动条，这是可取的。

但我不知道这是如何工作的，即为什么这个简单的修改会改变滚动条。

Answer 1

这是因为大多数（如果不是全部）浏览器在margin元素上都有8px的默认{。}}。

当存在此默认边距时，浏览器的高度不再是body。因此，存在滚动条。

更具体地说，您要为100%元素提供浏览器.parent的高度。除了100%（顶部+底部）边距外，还有空间过剩。

8px + 100%！= 16px。

在你的第二个例子中，使用

100%

..有效地删除了这个默认保证金。

你只能使用

* {
    margin: 0;     
    padding: 0;   
}

..得到相同的结果。

什么导致两个滚动条在这里？

1 个答案: