我想製作一個覆蓋整個頁面的div。我把高度爲100%的css樣式,但這隻覆蓋可視區域。當我向下滾動時,我希望它也覆蓋該區域。製作覆蓋整個頁面的div
回答
使用position:fixed
這樣你的div將保持在持續整個可視區域..
給你的div類overlay
和你的CSS創建以下規則
.overlay{
opacity:0.8;
background-color:#ccc;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:1000;
}
html, body { height: 100%; }
#page { min-height: 100% }
我不確定你在用這個div做什麼,但是你也可以設置元素的樣式。
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
}
#test {
position:absolute;
display:block;
background:#ccc;
height:100%;
width:100%;
}
</style>
+1用於歸零身體。 – cbednarski 2010-07-14 21:58:13
這將不起作用。「寬度和高度都爲100%的位置:絕對」仍然只適合視口。如果你滾動,它將向上滾動,頁面的其餘部分將沒有覆蓋。 – 2010-07-14 23:06:19
這是一篇關於如何做到這一點的好文章...
http://james.padolsey.com/javascript/get-document-height-cross-browser/
繼css
會做必要的工作。
.overlay {
background: #fff;
position: fixed;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
有時我們想要覆蓋頁面正文,直到網頁的所有資源都沒有完全下載。而且他們將淡出此疊加層以顯示我們網頁的完整內容。下面的例子是上述的答案稍加修改,在這個例子中,我們展示覆蓋頁的全身用CSS3動畫疊加:
更多的動畫,請訪問Here
$(window).load(function() {
$('.overlay').delay(1000).fadeOut(800);
});
.overlay {
background: #fff;
position: fixed;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
}
.loading-bar {
display: inline-block;
width: 4px;
height: 18px;
border-radius: 4px;
animation: loading 1s ease-in-out infinite;
}
.loading-bar:nth-child(1) {
background-color: #3498db;
animation-delay: 0;
}
.loading-bar:nth-child(2) {
background-color: #c0392b;
animation-delay: 0.09s;
}
.loading-bar:nth-child(3) {
background-color: #f1c40f;
animation-delay: .18s;
}
.loading-bar:nth-child(4) {
background-color: #27ae60;
animation-delay: .27s;
}
@keyframes loading {
0% {
transform: scale(1);
}
20% {
transform: scale(1, 2.2);
}
40% {
transform: scale(1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="overlay">
<div class="loading">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </p>
<p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </p>
<p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </p>
- 1. blockui覆蓋不覆蓋整個頁面?
- 2. div完全覆蓋頁面
- 3. 對齊兩個div並排覆蓋整個頁面寬度
- 4. 爲什麼我的覆蓋層覆蓋整個頁面?
- 5. 整個頁面覆蓋拖放jQuery
- 6. particles.js不覆蓋整個頁面
- 7. 使CSS菜單覆蓋整個頁面
- 8. 滾動覆蓋div沒有滾動整個頁面
- 9. 使Div覆蓋整個頁面(不只是視口)?
- 10. 乳膠:當圖形覆蓋整個頁面時頁碼抑制
- 11. JQuery燈箱 - 限制覆蓋到特定的div - 不是整個頁面
- 12. 使用CSS強制DIV覆蓋整行
- 13. 覆蓋整個div的圖像CSS
- 14. 如何使頁眉覆蓋整個頁面的長度?
- 15. 覆蓋整個div與圖像
- 16. 創建4個覆蓋整個頁面的響應框
- 17. 用多個鏈接覆蓋多個外部頁面或div
- 18. 兩個div覆蓋
- 19. 覆蓋一個畫布覆蓋div
- 20. 把一個覆蓋覆蓋div
- 21. 如何定位表格以覆蓋頁面的整個寬度
- 22. 彈出不覆蓋整個頁面的背景顏色
- 23. 背景未覆蓋整頁
- 24. 兩張圖片覆蓋整個網頁
- 25. 在整個網頁上覆蓋圖像
- 26. 覆蓋母版頁子頁面中的CSS div寬度
- 27. 收藏JS在整個頁面覆蓋,集中
- 28. 製作一個div嵌套頁面上滾動調整
- 29. 如何使facebox僅覆蓋給定的div,而不是覆蓋整個身體?
- 30. CSS漸變頁面覆蓋?
這裏一個偉大的文章,如何做到這一點... http://james.padolsey.com/javascript/get-document-height-cross-browser/ – exoboy 2010-07-15 03:11:24
檢查我的解決方案下面。除非我誤解了你的問題,否則其他解決方案只會告訴你視口(窗口)尺寸,而不是文檔尺寸...... – exoboy 2010-07-15 16:43:48
CSS解決方案不適用於這個問題,你需要一點JavaScript。 – exoboy 2010-07-15 16:44:05