Question

我从很多天开始经历了这么多帖子，但没有找到任何有用的东西。我正在使用bootstrap开发一个网站。我创建了页脚，但是它在所有页面上都无法正常工作，无论是在一个页面还是其他页面之间，还是在某个页面中，都会在右侧显示空间。我也试过jquery但没有成功。

我想创建一个类似于stackoverflow上的页脚，它总是停留在所有页面的底部，当我们滚动到最后时我们可以看到它。我在主母版页面上有页脚，其余页面是子母版和子页面。

 <div class="footer navbar-fixed-bottom">
        <div class="container text-right">
            <div id="socialMedia">
            </div>
        </div>
    </div>

的CSS

 html {
 height: 100%;
 box-sizing: border-box;
 }

 *,
 *:before,
 *:after {
 box-sizing: inherit;
  }

  body {
  position: relative;
  margin: 0;
  padding:0;
  min-height: 100%;
  margin-bottom:-50px;
     }

   .footer {
   position: absolute;
   right: 0;
   bottom:0;
   left: 0;
   padding:0;
   background-color:#333;
   width:100%;
   height:50px;
   margin-bottom:0px;

}

Answer 1

发现片段here非常适用于bootstrap

HTML：

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS：

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}

来源：Demo和Tutorial

Answer 2

简单地说不要使页脚绝对，但是相对这样：

.bodyContent {
  position:relative;
  padding:20px;
  margin-bottom:50px;
}

.footer {
   position: relative;
   background-color:#333;
   width:100%;
   height:50px;
   margin-bottom:0px;
}

Here your code plus the fix on JSFiddle.

如何创建动态页脚

2 个答案: