Скрытое переполнение не работает, несмотря на заданную высоту

#jquery #html #css #animation #overflow

#jquery #HTML #css #Анимация #переполнение

Вопрос:

Я не могу скрыть переполнение: http://codepen.io/aiwatko/pen/zKjaLx

 .loader-overlay {
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
  background-color: white;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

Я просмотрел предыдущие темы: я задал высоту элементу с помощью overflow: hidden, я установил для другого контейнера (моего содержимого div) значение position: relative, но когда я прокручиваю во время начальной анимации, я все еще вижу свой контент, который находится внизу. Я был бы признателен за любые подсказки.

1. 100% — это относительная мера. что это за наложение, размещенное ВНУТРИ? Вы используете 100% размера этого контейнера, а не 100% окна вашего браузера.

2. @MarcB правильно. Ваш loader-overlay родительский <body> элемент, который не имеет заданной высоты. Если вы хотите, чтобы это была высота окна, вы можете попробовать какой-нибудь вариант vh . Возможно height: 100vh;

3. Я протестировал его с Chrome на Android, и он работает так, как ожидалось, какой браузер доставляет вам проблемы?

4. Процентные высоты требуют установки высоты для родительского элемента. Таким образом, они знают, на чем основано —% .

Ответ №1:

Устанавливая вашу .loader-overlay высоту равной 100%, вы указываете, что она занимает 100% своего родительского элемента. Поскольку родительский элемент в вашем случае body не имеет заданной высоты, он не будет вести себя так, как вы ожидаете.

Я бы предложил попробовать CSS3 Viewport Height (vh). Что-то вроде этого установило бы div на высоту окна просмотра, которая может динамически меняться на разных устройствах:

 height: 100vh;

При этом ваш content файл даже не находится в div со скрытым переполнением, поэтому он увеличит высоту вашей страницы независимо от того, с чем вы работаете .loader-overlay .