不留在頁面底部的頁腳

我正在嘗試優化我正在爲移動用戶開發的網站。在網站上工作時，我注意到在非常小的屏幕上（特別是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

不留在頁面底部的頁腳

回答

相關問題