制作一个覆盖整个页面的 div

Posted 2023-03-06

【中文标题】制作一个覆盖整个页面的 div

【英文标题】：Making a div that covers the entire page

【发布时间】：2011-03-16 02:43:57

【问题描述】：

我想。我放置了一个高度为 100% 的 CSS 样式，但这仅涵盖可视区域。我希望它在我向下滚动时也覆盖该区域。

【问题讨论】：

这是一篇关于如何做到这一点的精彩文章...james.padolsey.com/javascript/get-document-height-cross-browser

在下面查看我的解决方案。除非我误解了您的问题，否则其他解决方案只会告诉您视口（窗口）尺寸，而不是文档尺寸...

CSS 解决方案不能解决这个问题，你需要一点 javascript。

【参考方案1】：

关注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>

【参考方案2】：

使用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/

【讨论】：

我不确定是否需要不透明度。

@Ultrasonic54321 不需要。它被添加到显示覆盖在滚动时起作用。

哦，伙计，几天来试图弄清楚这一点！！！非常感谢

【参考方案3】：

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

【讨论】：

这行不通.. position:absolute 100% 的宽度和高度仍然只适合视口。如果您滚动，它将向上滚动，页面的其余部分将没有覆盖层..

【参考方案4】：

我不确定你在用这个 div 做什么，但你也可以设置元素的样式。

【参考方案5】：

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

【讨论】：

这是完美的:)