Сделать контейнер контейнера 100% высоты, несмотря на содержание div

Question

У меня есть анимированный gif в div с низкой непрозрачностью (div.animated), который похож на фон на весь экран, ширину и высоту 100%. Однако, когда я пытаюсь поместить div (div.square) после первого с фиксированным размером и абсолютным положением, чтобы быть выше него, верхний div (div.animated) не адаптирует его высоту к полноэкранному.

Я не могу использовать div.animated как контейнер div.square, потому что первый будет охватывать второй с его анимированным gif-файлом, и мне нужно уменьшить непрозрачность только gif, а не содержимого.

Позиция фиксированная не полезна для меня, так как я хочу отзывчивый веб-интерфейс с автоматическим переполнением.

Подводя итог, мне нужно поставить 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, полная ширина и т.д ...

Для фона используйте что-то вроде этого для body в CSS:

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

Я думаю, что я получил то, что вы хотите/потребность, но я использую позицию: фиксированный и по-прежнему реагирует ...

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

См CodePen code

Update:

Если вам нужно .animated имеют все больше высоты, чем .square вы coud сделать что-то вроде этого, сохраняя ваши 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