Question

经过这么多努力，我终于为我的网站设计了页脚。但每当我减少移动视图中的浏览器大小时，我的页脚下方都会出现空白。这是因为桌面视图中页脚内容添加了边距。另外我不想改变页脚内容的排列方式。我尝试了很多东西，但仍然无法摆脱那个空白区域。

HTML：

<div class="footer" style="font-family: Georgia,Serif;">
  <div class="container">
    <div class="col-md-4 col-sm-4">
      <ul class="list-unstyled list-inline" style="margin-left:50px">
        <li><a style="color:white;font-size:20px" href="AboutUs.aspx">About Us</a></li>
        <li><a style="color:white;font-size:20px" href="ContactUs.aspx">Contact Us</a></li>
      </ul>
    </div>
    <div class="col-md-4 col-sm-4">
      <p style="color:white;text-align:center;font-size:15px;margin-top:48px">© 2016 Ashwini All Rights Reserved</p>
    </div>
    <div class="col-md-4 col-sm-4">
      <ul class="social-icons icon-circle list-unstyled list-inline" style="float:right">
        <li> <a href="http://www.facebook.com"><i class="fa fa-facebook"></i></a></li>
        <li> <a href="http://www.twitter.com"><i class="fa fa-twitter"></i></a></li>
        <li> <a href="http://www.google-plus.com"><i class="fa fa-google-plus"></i></a></li>
      </ul>
    </div>
  </div>
</div>

css：

.footer {
  position: absolute;
  right: 0;
  bottom: 0 !important;
  left: 0;
  padding: 1rem;
  background-color: #0E0E0E;
  height:100px;
}

Answer 1

您可以移除移动屏幕的高度。

此外，您可以集中对齐移动设备。

@media only screen and (max-width: 767px) {
  .footer {
    height: auto;
  }
  .footer ul{
    text-align: center;
    margin-left: 0;
    padding-left: 0;
    float: none;
  }
  .footer li{
    display: inline-block;
    margin: 0 5px;
  }
 }

https://jsfiddle.net/afelixj/3u3k4v06/

Answer 2

这里的问题是，你的CSS目前是这样的

.footer 
{
position: absolute;
right: 0;
bottom: 0 !important;
left: 0;
padding: 1rem;
background-color: #0E0E0E;
height:100px;
}

页脚高度固定为100px。但是你的HTML内容有三个这样的<div class="col-md-4 col-sm-4"></div> div。你的第三行正在超过100px的阈值。

将您的最小高度更改为更大的值。更好的选择是使用%或vh

.footer 
{
position: absolute;
right: 0;
bottom: 0 !important;
left: 0;
padding: 1rem;
background-color: #0E0E0E;
height:200px;
color:white;
}

这是工作demo

Answer 3

您可以overflow:hidden;

工作码本：http://codepen.io/anon/pen/EKPrEB

.footer 
{       
 overflow: hidden;  /*MODIFICATION */
padding-bottom:2px; /*MODIFICATION */
    position: absolute;      
  margin-bottom:0;
right: 0;
bottom: 0 !important;
left: 0;
background-color: #0E0E0E;
height:100px;      
}

Answer 4

尝试添加此css将解决问题。

@media only screen and (max-width: 500px) {
   .footer p{
      margin-top:0px !important;
   }
}

移动视图中页脚下方的空白区域

4 个答案: