html - CSS 中的 Div 定位会改变 body 定位吗？

Question

JSFiddle 可用 here .

我正在编写一个 HTML 页面，其正文中除了一个简单的 div 之外什么都没有。
没有 CSS，div 有 100% 的窗口宽度和大约 20% 的窗口高度(实际上是最大主体高度)，并且粘在窗口边框上。我希望它水平居中，垂直分离，所以我将 100% 宽度和 100% 高度应用到 html 和 body 标签，我还将自动左右边距应用到实际的 div，+ 125px 上边距。

html, body {
  width: 100%;
  height: 100%;
}

#div {
  margin-left: auto;
  margin-right: auto;
  margin-top: 125px;
}

现在的问题是页面可以滚动。当突出显示页面中元素的边框时，您可以看到 body 元素随 div 向下移动了 125px，从而允许滚动 125px。 div 仍然贴在 body 的上边框，但距离窗口的上边框 125px。
为了解决这个问题，我不得不将 position: fixed; 添加到 body 规则中。然后，body 贴在窗口边框上，div 距离 body 的顶部边框 125px。

但是，为什么在 body 内部定位一个 div 也会重新定位整个 body ？

编辑: div id 在提供的 JSFiddle 中是#prompt。

第二次编辑:原来的问题实际上是:
为什么我得到 this而不是得到 this ？ (链接是图片)
为什么 BODY block 实际上被 DIV CSS 规则移动了？
答案可能是我正在使用 Bootstrap，它不喜欢我覆盖 html 和 body 标签的规则。
查看marked answer略低于。

TL;DR，您可以在 CSS 中使用 !important 声明来正确覆盖 body 和 html 规则.

Answer 1

您当前的样式为 html 标记创建 100% 的高度 + 125px 的边距，这会创建垂直滚动溢出。这是因为您将 html 标签 css 设置为 height: 100%;，一旦从您的 css 中删除该行，div 的定位将不再影响页面的滚动，这正是您想要的.

http://jsfiddle.net/dmaymo3m/1/