Question

我正在使用bootstrap 3 - 对于这个主题，特别是粘性页脚会在手机和设备上造成问题（例如Chrome @ Samsung Galaxy 4，IPad）。

我正在使用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>

我正在使用带有以下扩展名的bootstrap 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;
 }

因此在实践中，两个容器应始终贴在页面底部并实现页脚。这适用于所有桌面浏览器，但如果要在移动浏览器上查看该网站，则页脚不在页面底部。页脚与页面底部之间的距离约为75px。

Answer 1

在移动设备的媒体查询中将此内容添加到您的页脚。

position:fixed;
bottom:0;
left:0;

你尝试过吗？ @joe

CSS：Bootstrap - 移动浏览器的粘性页脚错误位置

1 个答案: