html - 页面底部的随机空白，但仅限于移动设备

Question

您好，我已经查看了几个关于如何从网页中删除空白的 stackoverflow 问题(请参阅下面的选择)，但给出的解决方案对我来说没有任何区别。奇怪的是，只有当我在手机上查看我的网站时，才会出现空白。有问题的站点是:http://moduleplanner.github.io/其对应的github repo是:https://github.com/Moduleplanner/Moduleplanner.github.io

感谢您的帮助。 :)

Huge White Space At Bottom Of Page

Eliminating white space at bottom of page

CSS White Space At Bottom of Page

Strange space at bottom of page on iOS

current state of whitespace

Answer 1

这是您在 .degree 元素上的 CSS，特别是 absolute 定位。对于移动设备，将 css 更改为以下内容；

@media only screen and (max-width: 640px){
 .degree{
   min-width: 100%;
   left: 0;
   right: 0;
 }
}

或者，更好的是，以下内容；

@media only screen and (max-width: 640px){
 .degree{
   min-width: 100%;
   position: static;
 }
}

更新

@media only screen and (max-width: 640px){
 .degree{
   min-width: 100%;
   position: static;
 }

 .div.degree div.course{
   width: auto;
   max-width: 100%;
 }
}