页面底部的随机空白，但仅在移动设备上

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%;
 }
}