页脚在移动浏览器上被截断

Question

我在查看我在移动浏览器上设计的网站时遇到问题。在主页上，页脚将页面的一半截断，其内容在底部截断。我认为所有内容都没有足够的高度，并在 CSS 中为 body 声明高度无济于事。

这就是它的样子。

这就是正在发生的事情。

有人有什么建议吗？您可以通过www.lamarplaterimages.com 查看该网站。我正在使用 Safari 在 iPhone 11 上查看它。 Firefox 也出现了同样的问题。一切看起来都应该是在 Web 浏览器中使用开发工具的方式。

这是媒体查询中用于 375 像素屏幕尺寸的页脚和主页的小 CSS。

/* Homepage CSS */

html, body {
height: 100%;
}   

.main {
height: 418%;

}

/* Footer CSS */

footer {
height: 90%;
}

.page-footer-logo {
margin-left: 18%;
transform: translateY(30%);
}

.page-footer-logo img {
width: 230px;
}

.contact-info {
margin-left: -2%;
transform: translateY(30%);
}

.contact-info p {
font-size: 17px;
line-height: 30px;
text-align: center;
}

.nav-links {
display: none;
}

.work-hours {
margin-left: -2%;
transform: translateY(-30%);
}

.work-hours p {
font-size: 17px;
line-height: 30px;
text-align: center;
}

.page-social-media-links {
transform: translateY(150%);
margin-left: 28%;
}

.ig-link {
flex: .47;

}
.fb-link {
flex: .47;
}

.jaliyadesigns-link {
margin-left: -2%;
margin-top: 30%;
transform: translateY(-150%);
}

.jaliyadesigns-link p {
font-size: 17px;
text-align: center;
}

Answer 1

使用 Viewport Units，例如 vw 代表 width 和 vh 代表 height 而不是 px 或 % 代表所有您的元素包括 ma​​rgin 和 font-size，因为它将帮助您使您的网页/网站具有响应性。

它应该可以解决您的问题，但如果它没有让我在 cmets 中知道，我会尽力帮助您。