頁腳在我的網站沒有響應。 （使用引導程序）

Question

我一直在Visual Studio ASP.NET中的網站上工作。我的頁腳出現了問題，因爲它沒有響應。爲了弄清楚問題，我可以展示2個問題的圖像。

全屏：

iPhone尺寸：

我不知道是什麼原因造成的問題，因爲如果我做一個正常現象， col-md-4 x3然後它工作正常，但在它不起作用。

我的代碼：

<!-- Foooter 
================== --> 
    <footer class="footer"> 
     <div class="container"> 
      <div class="row"> 
       <!-- Contact us form --> 
       <div class="col-md-4"> 
        <div class="headline"> 
         <h3>CONTACT US</h3> 
        </div> 
        <hr /> 
        <div class="content"> 
         <p> 
          San Francisco, CA 94101<br /> 
          1987 Lincoln Street<br /> 
          Phone: +0 000 000 00 00<br /> 
          Fax: +0 000 000 00 00<br /> 
          Email: admin@mysite.com 
         </p> 
        </div> 
       </div> 
       <!-- Go social --> 
       <div class="col-md-4"> 
        <div class="headline"> 
         <h3>GO SOCIAL</h3> 
        </div> 
        <hr /> 
        <div class="content"> 
         <p> 
          Get in toach with us: 
         </p> 
        </div> 
       </div> 
       <!-- Subscibe --> 
       <div class="col-md-4"> 
        <div class="headline"> 
         <h3>SUBSCRIBE</h3> 
        </div> 
        <hr /> 
        <div class="content"> 
         <p> 
          Subscribe here: 
         </p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </footer> 

CSS：

從bootstrap.css

html { 
    font-family: sans-serif; 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    position: relative; 
    min-height: 100%; 
} 

body { 
    margin: 0; 
} 

footer { 
    background-color: #3f8797; 
    position: absolute; 
    bottom: 0; 
    color: white; 
    width: 100%; 
    height: 230px; 
    font-family: 'Lato', sans-serif;  
} 

從文件的site.css

body { 
    padding-top: 50px; 
    padding-bottom: 235px; 

} 

.body-content { 
    padding-left: 30px; 
    padding-right: 30px; 
} 

在全屏的頭應該是什麼 - >下來在所有的時間（不固定位置）的底部，但現在它沒有響應..

希望有人能看到什麼是錯的。

Answer 1

爲了獲得理想的效果，您需要通過媒體查詢將屏幕底部的頁腳定位在中等屏幕上，然後回退到只將其定位在較小設備上的內容底部。正如本Pen所示，

我已經更改了默認樣式頁腳：

footer { 
    background-color: #3f8797; 
    color: white; 
    width: 100%; 
    font-family: 'Lato', sans-serif;  
} 
body { 
    padding-top: 50px; 
} 

，然後我們在底部重新定位頁腳設備> 992px白手起家媒體breakpoint。

@media (min-width: 992px) { 
    body { 
     padding-bottom: 235px; 
    } 
    footer { 
     position: absolute; 
     bottom: 0; 
     width: 100%; 
     height: 230px; 
    } 
} 

---

或者你可以根據在頁腳Pen內容調整大小的填充，這是手動的，雖然同樣的效果可以使用JavaScript進行更有活力。

footer { 
    background-color: #3f8797; 
    color: white; 
    width: 100%; 
    font-family: 'Lato', sans-serif;  
} 
body { 
    padding-top: 50px; 
} 

@media (min-width: 992px) { 
    body { 
     padding-bottom: 235px; 
    } 
    footer { 
     position: absolute; 
     bottom: 0; 
     width: 100%; 
     height: 230px; 
    } 
} 

Answer 2

變化：

footer { 
    background-color: #3f8797; 
    position: absolute; 
    bottom: 0; 
    color: white; 
    width: 100%; 
    height: 230px; 
    font-family: 'Lato', sans-serif;  
} 

到：

footer { 
    background-color: #3f8797; 
    position: absolute; 
    bottom: 0; 
    color: white; 
    width: 100%; 
    min-height: 230px; 
    font-family: 'Lato', sans-serif;  
} 

而且你對你的方式。