製作覆蓋整個頁面的div

Question

我想製作一個覆蓋整個頁面的div。我把高度爲100％的css樣式，但這隻覆蓋可視區域。當我向下滾動時，我希望它也覆蓋該區域。

Answer 1

使用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; 
} 

演示：http://www.jsfiddle.net/TtL7R/1/

Answer 2

html, body { height: 100%; } 
#page { min-height: 100% } 

Answer 3

我不確定你在用這個div做什麼，但是你也可以設置元素的樣式。

Answer 4

<style type="text/css"> 
html, body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#test { 
    position:absolute; 
    display:block; 
    background:#ccc; 
    height:100%; 
    width:100%; 
} 
</style> 

Answer 5

這是一篇關於如何做到這一點的好文章...

http://james.padolsey.com/javascript/get-document-height-cross-browser/

Answer 6

繼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>