使 div 容器的高度为 100%，尽管有内容 div

Question

我在不透明度较低的 div (div.animated) 中有一个动画 gif，它就像全屏的背景，宽度和高度为 100%。但是，当我尝试在第一个具有固定大小和绝对位置的 div 之后放置一个 div (div.square) 以便高于它时，上 div (div.animated) 不会使其高度适应全屏。

我不能将div.animated 用作div.square 的容器，因为第一个容器会用其背景动画 gif 覆盖第二个容器，我只需要降低 gif 的不透明度，而不是内容。

固定位置对我没有用，因为我想要一个具有自动溢出功能的响应式网络。

总而言之，我需要将一个 div 放在另一个不透明度较低的 div 之上。

我尝试做的一个例子：

Link

<div class="animated"></div>
<div class="square"></div>

Answer 1

您可以执行以下操作 - 强制背景 div 占据整个高度，而不管里面的内容如何，​​请使用以下 CSS：

#container {
  display:block;
  border:1px solid black;
  height:100vh;
  width:100%;
  background:url('http://media.giphy.com/media/SZQslH8yhprFu/giphy.gif') center center no-repeat;
  background-size:cover;
  overflow:auto;
  margin:0;
  padding:0;
}
#content {
  height:auto;
  width:50%;
  margin:0 auto;
  text-align:center;
  background-color:rgba(110,110,110,0.75);
  padding:10px;
}

使用overflow:auto 允许内容滚动，同时保持页面背景在同一位置。

这是一个CodePen demo，显示了结果。

Answer 2

我真的试图解释你的问题。但是你能不能用 div 的名字来称呼它们，比如：我想要 animated 在 square 前面，全宽等等...

对于 CSS 中的 body，在后台使用类似这样的内容：

body {
    background: url(img_flwr.gif);
    background-size: cover;
    background-repeat: no-repeat;
}

来源：w3school.com

要将另一个 div 放入 div 中，请在 HTML 中执行此操作：

<div class="animated">
   <div class="square"></div>
</div>

Answer 3

我想我得到了你想要/需要的东西，但我使用 position: fixed 并且它仍然响应...

.square{
  background-color: pink;
  width: 500px;
  height: 500px;
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -250px;
}

见CodePen code

更新：

如果你需要 .animated 比 .square 有更高的高度，你可以做这样的事情，保持你的 html 和 css 逻辑：

$(document).ready(function(){

  var squareArea = $(".square").height() + ($(".square").offset().top * 2);

  if($(".animated").height() < squareArea)
    {
      $("body").height(squareArea);
      $(".animated").height(squareArea);
    }
});

JSFiddle code