页脚应该在页面底部/内容

我无法弄清楚如何让页脚粘到底部。如果内容小于尺寸页脚应该在底部&如果内容大于窗口大小，页脚应该在内容的结尾。我知道互联网上有大量的材料，如何将脚注粘到底部。下面的代码工作正常时，内容大：页脚应该在页面底部/内容

这里是我的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%; 
}

来源

2017-10-05 Sangeet Asati

为了让您的页脚固定在底部，位置：固定;底部：0; –

您的页脚位置应该absolute不relative和top -styling应除去。也许检查出bootstraps sticky footer source code。不管你是否使用bootstrap，粘性页脚的样式都是一样的。

下面是它的基本部分：

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); 
 
}

<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>

来源

2017-10-05 20:09:14

谢谢。请再帮我一次。 –

如果您发现此问题可以解答您的问题，请考虑将其标记为已回答。如果您有不同的问题，请随时用它创建一个新问题，我会看看我能否提供帮助。 :-) –

您可以使用position: sticky这些天

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

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

来源

2017-10-29 10:34:23 Mina

页脚应该在页面底部/内容

回答

相关问题