Question

我无法弄清楚如何使页脚粘到底部。如果内容小于大小页脚应该在底部＆amp;如果内容大于窗口大小，页脚应该在内容的末尾。我知道互联网上有大量的材料，如何将页脚粘到底部。当Content large：

时，Code Code正常工作

这是我的HTML：

<html>
 <body ng-cloak> 
   <notifications-bar class="notifications"></notifications-bar> 
   <div ng-controller="MainCtrl as main">
     <ng-include src="'app/layout/header.html'"></ng-include>
     <div ng-view></div>
     <ng-include src="'app/layout/footer.html'"></ng-include> 
   </div> 
  <spinner></spinner> 
 </body> 
</html>

这是CSS：

* {
    margin: 0;
}

html {  position: relative;   min-height:100%;
}

html, body {    margin:0px;    padding:0px;
}   

.footer_body {
  background-color: rgb(102, 102, 102);
  margin:0px;
  position: relative;
  top: 0px;
  bottom: 0px;
  width: 100%;
}

Answer 1

您的页脚位置应为absolute而不是relative，并且应删除top - 样式。也许看看bootstraps sticky footer source code。无论您是否使用引导程序都无关紧要，粘性页脚的样式无论如何都是相同的。

以下是其中的重要部分：

＆＃13;

html, body {
    margin: 0;
    padding: 0;
}
html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 60px;  /* height of footer */
}
.footer_body {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;  /* height of footer */
    background-color: rgb(102, 102, 102);
}

＆＃13;

<html>
<body ng-cloak> 
    <notifications-bar class="notifications"></notifications-bar> 
    
    <div ng-controller="MainCtrl as main">
        <ng-include src="'app/layout/header.html'"></ng-include>
        <div ng-view></div>   
    </div> 
    
    <footer class="footer_body">
        <ng-include src="'app/layout/footer.html'"></ng-include> 
    </footer>
    <spinner></spinner>
</body> 
</html>

＆＃13;

Answer 2

这些天你可以使用position: sticky

演示笔https://codepen.io/D-Heap/pen/RjwEEr

即如果您不需要太多向后兼容性（特别是对于IE）。 http://caniuse.com/#feat=css-sticky

页脚应位于页面/内容的底部

2 个答案: