絕對定位的DIV填滿整個頁面

-1

有人可以告訴我爲什麼絕對定位的紅色DIV不填滿整個頁面，以及如何修復它？它只填充視口。我已經看到了很多相同的問題，但是無論這個人的代碼如此混亂，難怪它不起作用，或者解決方案不起作用。絕對定位的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>

來源

2013-09-21 Gavin

我想通了。出於某種原因，即使在指定正文元素的位置，寬度和高度後，這也不起作用，但是將所有內容都包裝在正文內的DIV中，並將其設置爲position: relative。

http://jsfiddle.net/k5uZ5/

我仍然不知道爲什麼<body>沒有表現得像其他元素。如果有人能解釋我會很感激。

來源

2013-09-22 20:33:44 Gavin

更改從絕對到固定的位置。

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

jsFiddle example

來源

2013-09-21 21:57:19 j08691

這就是我通常使用的，但在這種情況下，我想保留包含在DIV中的所有內容，而不是在其外面放置固定的DIV，並且涉及滾動，所以position：fixed將不起作用案件。 – Gavin

我想這只是不可能的？從技術上講，我不知道爲什麼不。即使在身上設置一個固定的高度也不行。無論如何，我認爲一個固定的位置是唯一的方法，所以我將其標記爲正確的答案。 – Gavin

如果您使用的是固定的，您將無法達到iPad Mobile Safari所需的效果。另一個答案達到了更大的移動設備份額。 –

所有你需要的是有以下幾點：

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

來源

2013-09-21 22:24:42 Alex

這不管用，Alex。你試過了嗎？ 'top：0;底部：0;左：0; right：0;'應該也可以，但是這兩個都不能在'body'元素上工作。我把你的CSS放入一個小提琴... http://jsfiddle.net/JyN3c/ – Gavin

好吧，我上面的評論給了我一個主意。由於相同的原因，即使指定了body元素的位置，寬度和高度，也不起作用。使用容器的作品。我會添加這個問題的答案。 – Gavin

在這種情況下，你的絕對位置div會使窗口的高度/尺寸變大，最好的解決方案是去選擇psition：fixed;或者責備你的解決方案，或者尋找一個快速的JavaScript解決方案，或者根據你的HTML結構不同的佈局選項，如果你想堅持position：absolute; – Alex

絕對定位的DIV填滿整個頁面

回答

相關問題