不留在页面底部的页脚

我正在尝试优化我正在为移动用户开发的网站。在网站上工作时，我注意到在非常小的屏幕上（特别是450像素和更小的宽度），我的页脚中断，不再卡在页面的底部。不留在页面底部的页脚

我认为罪魁祸首是什么东西做的#viewWrapper格但检查后通过Chrome控制台与它乱搞（位置，物理尺寸等。）几天我还没有找到一个解决方案到它。

任何帮助表示赞赏。这里是链接到页面的问题：
http://mhtc-vm1.cs.wpi.edu:8080/test/explore

页面的结构：

<body> 
    ... 
    <div class="container-fluid-full"> 
     ... 
     <div id="content"> 
      ... 
      <div id="viewWrapper"> 
       ... 
      </div> 
     </div> 
    </div> 
    <footer>...</footer> 
</body>

一些相对CSS：

@media only screen and (max-width: 450px) { 
    #viewWrapper { 
     left: 0px; 
    } 
} 

#viewWrapper { 
    position: absolute; 
    top: 180px; 
    left: 450px; 
    right: 0px; 
    bottom: -160px; 
    overflow: hidden; 
    border: 0; 
    margin: 0; 
    outline: 0; 
    padding: 0; 
    vertical-align: baseline; 
    display: block; 
} 

.site-footer { 
    position: relative; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    z-index: 999; 
    padding: 10px 0px !important; 
    clear: both; 
    display: block; 
}

来源

2016-12-15 xjsc16x

请张贴实际的代码，而不是链接到外部网页。 –

我更新了包含一些相关代码的问题，对不起 – xjsc16x

您可能需要编写

@media screen 
    and (max-device-width: 1024px) { 

    #viewWrapper{ 
     bottom: 0; //apply bottom 0 with media query for small screen only 
    } 

}

来源

2016-12-15 04:03:05 Rahul

谢谢，这个修好了！ – xjsc16x

使用在页脚2个div标签，并给它你喜欢的风格会在屏幕过渡时一起流动。

<footer id="colophon" class="site-footer" role="contentinfo"> 
    <div class="site-info container"> 
     <p class="copy">&copy; 2016. Worcester Polytechnic Institute. All Rights Reserved. 
     Sponsored by Mass High Technology Council</p> 
    </div> 
     <div style="float:right;padding-right:20px"> 
     <a class="footerLinks" href= "api"> For Developers </a> 
     <a class="footerLinks" href= "feedback"> Contact Us</a> 
     <a class="footerLinks" href= "about"> About Us </a><br /> 
     </div> 
    <!-- .site-info --> 
</footer>

来源

2016-12-15 03:53:31 chop62

不留在页面底部的页脚

回答

相关问题