如何阻止div在其他html内容上崩溃

我一直在尝试编写一个网站的代码，让主部分在所有设备上100%地占据屏幕（即，徽标、导航栏、滑块和引号占据整个屏幕，然后向下滚动，下一部分是“联系我”）。在我的笔记本电脑屏幕和iPhone6上，它看起来是正确的，但在较小的移动屏幕上（以及当我将浏览器调整到较小的尺寸时），“联系我”部分似乎比其他内容更容易崩溃

我试过在div上设置一个最小宽度（很多建议似乎都是这样），但没有成功

我已经附上一个链接到该网站，任何建议将不胜感激

---

如果您不希望单词在空白处折叠，我建议在

h2

的“联系我”元素中添加

空白：nowrap

样式

CSS:

HTML:

联系我

这里有一条CSS规则：

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

将

高度

更改为

最小高度

，并将

高度：100%

添加到

车身

：

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

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

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