特定浏览器在 phone 屏幕底部显示空白
Specific Browsers are displaying whitespace at the bottom of phone screen
我有一个奇怪的问题,它发生在特定的浏览器上,可能与视口有关(我是新开发人员,所以不完全理解正确的术语)。
存在问题的浏览器:
- 勇敢的浏览器
- DuckDuckGo
没有问题的浏览器:
- 野生动物园
- Google Chrome
当我向右向下滚动到页面底部时,无论我做什么都不会消失的少量空白。
我有:
- 为页脚添加了 100% 的宽度和高度
- 添加了 100vh 的最小高度
- 检查了幻影字符
- 更改了脚本在 HTML
中的位置
白色开始的地方就是屏幕开始弯曲的地方(iPhone 11)。
这些是我的 CSS 代码片段,可能会有用(页脚部分是黑色部分底部的第二条灰线):
* {
margin: 0;
padding: 0;
outline: none;
font-family: "Raleway", serif;
font-weight: 400;
box-sizing: border-box;
}
/* Footer */
.footer {
background-color: #0e1111;
}
.footer_wrapper {
color: grey;
max-width: 2000px;
margin: 0 auto;
padding: 0 10%;
}
.copyright {
font-size: 15px;
letter-spacing: 1px;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
border-top-width: 1.5px;
border-top-style: solid;
border-top-color: #232323;
}
/* End of code */
我的屏幕底部:
有谁知道为什么会这样,如果需要提供更多代码,我会更新 post。
为了解决这个问题,我不得不填写车身颜色。
body {
background-color: black;
}
这似乎是个别浏览器特有的问题,因为许多流行的网站(例如 bbc.co.uk and news.sky.com 等)都有同样的问题(页脚没有延伸到屏幕底部)。
我有一个奇怪的问题,它发生在特定的浏览器上,可能与视口有关(我是新开发人员,所以不完全理解正确的术语)。
存在问题的浏览器:
- 勇敢的浏览器
- DuckDuckGo
没有问题的浏览器:
- 野生动物园
- Google Chrome
当我向右向下滚动到页面底部时,无论我做什么都不会消失的少量空白。
我有:
- 为页脚添加了 100% 的宽度和高度
- 添加了 100vh 的最小高度
- 检查了幻影字符
- 更改了脚本在 HTML 中的位置
白色开始的地方就是屏幕开始弯曲的地方(iPhone 11)。
这些是我的 CSS 代码片段,可能会有用(页脚部分是黑色部分底部的第二条灰线):
* {
margin: 0;
padding: 0;
outline: none;
font-family: "Raleway", serif;
font-weight: 400;
box-sizing: border-box;
}
/* Footer */
.footer {
background-color: #0e1111;
}
.footer_wrapper {
color: grey;
max-width: 2000px;
margin: 0 auto;
padding: 0 10%;
}
.copyright {
font-size: 15px;
letter-spacing: 1px;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
border-top-width: 1.5px;
border-top-style: solid;
border-top-color: #232323;
}
/* End of code */
我的屏幕底部:
有谁知道为什么会这样,如果需要提供更多代码,我会更新 post。
为了解决这个问题,我不得不填写车身颜色。
body {
background-color: black;
}
这似乎是个别浏览器特有的问题,因为许多流行的网站(例如 bbc.co.uk and news.sky.com 等)都有同样的问题(页脚没有延伸到屏幕底部)。