页脚不在页面底部

Question

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

我认为罪魁祸首与 #viewWrapper div 有关，但在通过 chrome 控制台检查并摆弄它（位置、物理尺寸等）后.) 几天来我还没有找到解决办法。

感谢任何帮助。这是相关页面的 link：
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;
}

Answer 1

在页脚中使用两个 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>

Answer 2

你可能想写

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

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

 }

页脚不在页面底部

Footer not staying at the bottom of the page

html

css

footer

sticky-footer