Question

在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;
}

有什么想法吗？

Live demo

你可以看到这个：

编辑：

有评论说有关div的内容，但是用户删除了它..

Answer 1

尝试将min-height: 100%添加到body，以适用body未涵盖整个屏幕的情况。此外，还height: 100%到html作为body

的父元素

Div并不是移动设备的底部，而是PC

1 个答案: