绝对中断父母的位置

Question

我想将.login置于body内。目前一切看起来都是理想的，但是如果我检查它，我可以看到实际上并不在body的区域：

我可以用以下方法解决它：

.login {
 position: absolute;
 width: 100%;
 height: 100%;
}

但这会破坏身体。如何在保持元素处于正常工作流程的同时解决这个问题？

Answer 1

这会解决您的问题吗？

html,body,.login{
  height:100%;
  margin:0;
}

height:100%没有position: absolute;后无效的原因是因为.login的父级没有100％的页面。它只有body的高度的100％非常小：它的作用与默认position:static的作用方式相同。 This answer稍微详细一点。

Answer 2

将此添加到您的代码中：

html, body { height: 100%; }
.login { height: 100%; }

Answer 3

你不需要使用position：absolute，使用margin：0 auto而不是它

.login {
   width: 360px;
   margin:0 auto;
}