Div не привязывается к мобильным устройствам, а к ПК

В Chrome и Firefox, в Windows и Mac мой div отображается внизу, как и ожидалось. Однако некоторые мобильные пользователи сообщили, что это не так.

HTML:

<body>
<div id="oceanDiv" class="ocean">
  <div id="wave1" class="wave"></div>
  <div id="wave2" class="wave"></div>
</div>
</body>

CSS:

body {
  background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
  // background:#B7E8EB;
  overflow: hidden;
}

.ocean { 
  height: 5%;
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  background: #015871;
}

Есть мысли, пожалуйста?

Живая демо

где вы могли видеть это:

введите описание изображения здесь

РЕДАКТИРОВАТЬ:

Был комментарий говорит что-то о div, но пользователь удалил его..

Источник

1 ответ

Решение

Попробуй добавить min-height: 100% в bodyдля ситуаций, когда body не покрывает весь экран. А также height: 100% в html как родительский элемент body

Источник
Другие вопросы по тегам