html - 如何阻止 div 折叠在其他 html 内容上

Question

我一直在尝试编写一个网站，让主要部分在所有设备上占据 100% 的屏幕(即 Logo 、导航栏、 slider 和引号填满整个屏幕，然后向下滚动，下一部分是'联络我')。在我的笔记本电脑屏幕和 iPhone 6 上，它看起来是正确的，但在较小的移动屏幕上(以及当我将浏览器调整为较小尺寸时)，“联系我”部分似乎会折叠到其他内容之上。

我试过在 div 上设置最小宽度(许多建议似乎都是这样)，但没有成功。

我已附上该网站的链接，如有任何建议，我们将不胜感激。

http://176.32.230.9/andycheckcheck.co.uk/homepage.html

Answer 1

你有这个 CSS 规则:

.firstSection {
    height: 100%;
    width: 100%;
    background-color: #EDF4ED;
}

将 height 更改为 min-height 并将 height: 100% 添加到 body:

.firstSection {
    min-height: 100%;
    width: 100%;
    background-color: #EDF4ED;
}
body {
    height: 100%;
}