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仍然贴在身体的顶部边框上，但距离窗口的顶部边框125px 要解决此问题，我必须将position: fixed;添加到正文规则中。然后，身体被粘在窗口边框上，div距离身体的顶部边界125px。

但是，为什么在体内定位div也会重新定位整个身体？

编辑： div ID在提供的JSFiddle中是#prompt。

2ND编辑：原来的问题实际上是：
为什么我得到this而不是this？ （链接是图片）
为什么BODY块实际上是由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/

Answer 2

编辑答案：

我在html和body元素中添加了一个bootstrap容器和一些CSS，这似乎有效。

在这里小提琴：http://jsfiddle.net/tzhben/byye4eop/1/

<强> CSS：

body {
  background-color: #EDF;
}
html, body {
  height: 100% !important;
}

<强> HTML：

<body>
  <div class="container">
     <div id="prompt">
        <p class="well">Please login to continue.</p>
          <form action="index.php" method="post">
             <div id="pwd-box" class="input-group">
                <input type="text" class="form-control" placeholder="Password">
             </div>
          </form>
     </div>
  </div><!-- /.container -->
</body>

希望这有帮助！

CSS中的Div定位会改变身体定位吗？

2 个答案: