Question

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

我认为与#viewWrapper div有关的罪魁祸首是在通过镀铬控制台检查并弄乱了它（位置，物理尺寸等等）几天后我还没有找到解决方案。

感谢任何帮助。以下是相关页面的链接：
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

你可能想写

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

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

 }

Answer 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>

页脚没有停留在页面底部

2 个答案: