在我的 Angular 应用程序中，我很难让页脚贴在页面底部。我尝试了很多不同的事情，但似乎无法弄清楚我做错了什么。我已经定义了容器 div 的高度，所以我知道视口(viewport)大小，因此页脚应该能够识别视口(viewport)的底部并留在那里。然而，随着内容的增长，页脚不会随着内容的增长而增长。
HTML:
<body style="margin:0; padding:0; height:100%;">
<app-root></app-root>
</body>
应用根目录 html:
<div class="container">
<app-header id="header"></app-header>
<div id="body">
<router-outlet></router-outlet>
</div>
<app-footer id="footer"></app-footer>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
height:100%;
position:relative;
}
#header {
padding-bottom:10px;
}
#body {
padding:10px;
padding-bottom:10px;
}
#footer {
position: absolute;
bottom:0;
width:100%;
height:60px;
}
最佳答案
将您的 app-footer 放在单独的 div 中并添加以下类:
<div class="fixed-bottom">
<app-footer></app-footer>
</div>
风格:
.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
}
关于html - 页脚不会粘在页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59284189/