0
我正在使用bootstrap 3 - 對於這個話題，特別是sticky-footer會在手機和設備（例如Chrome @ Samsung Galaxy 4，IPad）上造成問題。CSS：Bootstrap - sticky-footer錯誤的手機瀏覽器位置
我正在使用div容器（wrap_con）將頁腳向下推到頁面末尾。所以，我的HTML代碼如下所示：
<body>
<div id="wrap_con">
page content
</div>
<div id="my_footer">
two container (<div class="container">) are implementing the footer here
</div>
我使用自舉3以下自己的擴展：
#wrap_con {
background-color:white;
font-color:black;
color: #000000;
font-family: 'Droid Sans',sans-serif;
font-size: 14px;
border: 0px solid white;
height: auto;
margin: 0 auto -150px;
/* margin: 0 auto 0px; */
min-height: 100%;
padding: 0 0 150px;
/* padding: 0 0 0px; */
}
#my_footer {
height: 150px;
color: #ffffff;
font-size: 10px;
border: 0px solid white;
border-style: none;
}
#my_footer .container:first-of-type {
background: transparent url(footer_bg_white.gif) repeat;
width: 100%;
border: 0px solid white;
height: 80px;
padding-top: -30px;
}
#my_footer .container:last-of-type {
background: transparent url(footer_bg.gif) repeat;
width: 100%;
height: 80px;
border: 0px solid white;
}
所以在實踐2個容器應始終堅守在頁面底部並實現頁腳。這適用於所有桌面瀏覽器，但如果要在移動瀏覽器上查看網站，頁腳不在頁面的底部。頁腳和頁面底部之間的距離爲75px左右。