Question

有人可以告诉我为什么绝对定位的红色DIV没有填满整个页面以及如何修复它？它只填充视口。我已经看到了很多相同的问题，但是这个人的代码是如此混乱，难怪它不起作用，或者解决方案不起作用。

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

<div style="position: absolute; z-index: 999; background-color: #f00; left: 0px; top: 0px; right: 0px; bottom: 0px;"></div>

Answer 1

将位置从绝对更改为固定。

<div style="position: fixed; z-index: 999; background-color: #f00; left: 0px; top: 0px; right: 0px; bottom: 0px;"></div>

<强> jsFiddle example

Answer 2

您只需拥有以下内容：

position:absolute;
z-index:999;
top:0;
left:0;
width:100%;
height:100%;
background:#f00;

Answer 3

我明白了。出于某种原因，即使在body元素上指定position，width和height之后，这也不起作用，但是将DIV中的所有内容包装在body内部并将其设置为position: relative可以正常工作。

http://jsfiddle.net/k5uZ5/

我仍然不确定为什么<body>的行为与其他元素不同。如果有人能解释我会感激不尽。

绝对定位的DIV填满了整个页面

3 个答案: