Question

我有一个工作正常的页脚，但是当页面中的内容大小比页面大小短时，页脚会在不在页面底部的内容下面呈现，这是一个图像：

enter image description here

这是我的代码（jsbin代码段）：

＆＃13;

    .footer {
      position: absolute;
      width: 100%;
      margin-bottom: 0;
      background-color: #2D2D2D;
      height: 100px;
      text-align: center;
      color: white;
     }

＆＃13;

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />


    </head>
    <body ng-app="AngularJSApp">
    <div class="contentBody">
         
        
        <div id="contenido"> 
            @RenderBody()
        </div>

    </div>


    <div class="footer">
       
        <p class="copyright">Copyright &copy; 2015 Diego Unanue &mdash; <a href="http://ryanfait.com/" title="3xM Web Design">3xM Web Design</a></p>
    </div>

</body>
</html>

＆＃13;

如何解决此问题，并始终将页脚保留在页面底部？

Answer 1

你可以使用这个粘性页脚：

html,
body {
  height: 100%;
  margin: 0
}
.contentBody {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -100px
}
.contentBody:after {
  content: "";
  display: block
}
.footer,
.contentBody:after {
  height: 100px
}
.footer {
  width: 100%;
  background-color: #2D2D2D;
  text-align: center;
  color: white
}

<body ng-app="AngularJSApp">
  <div class="contentBody">
    <div id="contenido">
      @RenderBody()
    </div>
  </div>
  <div class="footer">
    <p class="copyright">Copyright &copy; 2015 Diego Unanue &mdash; <a href="http://ryanfait.com/" title="3xM Web Design">3xM Web Design</a>
    </p>
  </div>
</body>

Answer 2

将此添加到您的css

html, body {
  min-height: 100%;
 }

and .footer change

margin-bottom: 0;

到

bottom: 0;

Answer 3

你可以使用

html,body {
    position:absolute;
    bottom: 0px;
}

内容短于页面大小时粘性页脚

3 个答案: