页面底部的随机空白区域，但仅限于移动 [英] Random white space at bottom of page but only on mobile

问题描述

您好我看了几个关于如何从网页中删除空白的stackoverflow问题（请参阅下面的选择），但没有人提供的解决方案对我有任何不同。值得一提的是，当我在手机上查看我的网站时，空白只显示出来。有问题的网站是： http://moduleplanner.github.io/ 及其相应的github repo是： https://github.com/Moduleplanner/Moduleplanner.github.io

感谢您的帮助。 ：）

巨大页面底部的空白处

消除页面底部的空白处

页面底部的CSS空白处 $ b

iOS页面底部的空间太小

目前的空白状态

解决方案

它是.degree元素上的CSS，特别是绝对定位。对于手机，请将css更改为以下内容;

  @media屏幕和（最大宽度：640px）{
 .degree {
最小宽度：100％; 
剩下：0; 
 right：0; 
} 
} 
  

或者，甚至更好，如下所示;

  @media屏幕和（最大宽度：640px）{
 .degree {
最小宽度：100 ％; 
 position：static; 
 
 
 
 
 $ h $更新 
 
 
  @media仅限屏幕和（最大宽度：640px）{
 .degree {
最小宽度：100％; 
 position：static; 
} 
 
 .div.degree div.course {
 width：auto; 
最大宽度：100％; 
} 
} 
  
 
Hi I have looked at several stackoverflow questions on how to remove white space from a webpage (see selection below) but noone of the solutions given had any difference for me. The werid thing is that the whitespace only shows up when I look at my site on my mobile. The site in question is: http://moduleplanner.github.io/ and its corresponding github repo is: https://github.com/Moduleplanner/Moduleplanner.github.io

Thanks for the help. :)

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
解决方案
It's your CSS on the .degree element, specifically the absolute positioning. For mobile, change the css to the following;
@media only screen and (max-width: 640px){
 .degree{
   min-width: 100%;
   left: 0;
   right: 0;
 }
}
Or, even better, the following;
@media only screen and (max-width: 640px){
 .degree{
   min-width: 100%;
   position: static;
 }
}


Update

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

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


                        
这篇关于页面底部的随机空白区域，但仅限于移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！