Question

我正在使用bootstrap 3.0，我的页面底部放置了粘性页脚.Footer在手机和平板电脑视图中重叠了页面内容。

页脚代码如下：

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

#footer 
{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f1f1f1;
}

#push
{
    height: 60px;
}

#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -60px;
}
/* Lastly, apply responsive CSS fixes as necessary */
    @media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    }

基本页面骨架：

<div id="wrap">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
.....
</div>
</div>


<div class="container">
......
</div>
</div> <!-- End -Wrap -->
<div id="push"></div>
<div id="footer">
    <div class="container">
            ....
      </div>
</div>

请告诉我我的代码需要做哪些更改。

Answer 1

不需要使用包装器。可以在sticky footer中找到的official examples的最新版本没有使用，而且效果很好。

这是CSS

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

对于以下HTML：

<body>
  <div class="container">
    ...
  </div>

  <div id="footer">
    <div class="container">
      <p class="text-muted">Place sticky footer content here.</p>
    </div>
  </div>
</body>

Answer 2

您需要将导航栏和容器包装在具有包装ID且不包含页脚的div中

虚拟结构：

 <div id="wrap">
   <jsp:include page="header.jsp"/>  // say ur nav bar code 
    <div class="container">
     <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8"> my body  </div>
        <div class="col-md-2"></div>
    </div>
  </div>
</div><%--wrap ends here--%>
<jsp:include page="footer.jsp"/>

Stickyfooter.css

/* Styles go here */

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
 }

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #cccccc;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  padding: 0 15px;
 }
.container .credit {
   margin: 20px 0;
 }

Answer 3

在CSS中没有问题，但我在某些 DIV 中给出了高度，所以它没有用。

例如。有Bug

<div style="height:400px">
</div>

我已移除身高 -

<div>
...
</div>

谢谢大家回答......

粘性bootstrap页脚重叠页面的内容

3 个答案: