页脚不会粘在页面底部答案

【问题标题】：Footer wont stick to the bottom of the page页脚不会粘在页面底部
【发布时间】：2020-04-04 15:22:52
【问题描述】：

在我的 Angular 应用程序中，我很难让页脚粘在页面底部。我尝试了许多不同的事情，但似乎无法弄清楚我做错了什么。我已经定义了容器 div 的高度，所以我知道视口大小，因此页脚应该能够识别视口的底部并留在那里。然而，随着内容的增长，页脚不会随着内容的增长而增长。

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

【问题讨论】：

为什么不尝试使用flex approach（您的 html 是否也出现在您的 body 标签内，或者实际上是这样吗？）
我尝试了 flexbox 方法，但没有运气。是的，它是一个基于 Angular 的应用程序，“app-root”是您看到的第二个 html 块
尝试位置：改为固定
我不想固定页脚我希望它是粘性的

标签： html css angular footer

【解决方案1】：

1) 拼写错误 css 分配给 id #container HTML 使用 class

2) 移除高度#container

3) 添加 padding-bottom #body 为页脚高度；

更改 CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   /*height:100%;*/ /*Remove this*/
   position:relative;
}
#header {
   padding-bottom:10px;
}
#body {
   padding:10px;
   padding-bottom:60px; /* Add Padding footer Height*/
}
#footer {
   position: absolute;
   bottom:0;
   width:100%; 
   height:60px;   
}

【讨论】：

更新了输出的屏幕截图，现在纠正了错字。我也尝试将页脚移出容器，但仍然无济于事。
同样的问题可以继续聊聊
嗯，一定是其他东西干扰了样式
让我们continue this discussion in chat.

【解决方案2】：

将您的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;
}

【讨论】：

【解决方案3】：

使用 flexbox 可能会提供最简洁的实现并具有良好的浏览器支持。

这是我过去所做的，注意到内容就在那里，所以 sn-p 会按预期显示。

下面的结构与您的问题相似。您可能需要将其分解为适合您应用的组件。请注意我使用类选择器而不是 id 选择器，因为另一个答案指出您的 #container 和 .container 有错字。

html, body {
  height: 100%;
  margin: 0;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: powderblue;
}

.content {
  flex: 1 0 auto;
  background-color: salmon;
}

.footer {
  flex-shrink: 0;
  background-color: orchid;
}

<body>
  <app-root>
    <div class="container">
      <header class="header">
        <app-header>header content</app-header>
      </header>
      <main class="content">
        <router-outlet>main content</router-outlet>
      </main>
      <footer class="footer">
        <app-footer>footer content</app-footer>
      </footer>
    </div>
  </app-root>
</body>

此答案基于来自 Sticky Footer, Five Ways 的 sn-p 使用 flexbox 选项。您可以在该文章中查看替代方案。

【讨论】：

很好的解决方案，问题是由于我绝对定位一个带有内容 div 的元素。

【解决方案4】：

使用 flexbox 这应该很简单。

   <body>
      <header>...</header>
         <main class="main-content">
         ...
         ...
         </main>
      <footer>...</footer>
    </body>

无论您的主要内容容器是什么（在本例中为 .main-content 类，应用此 flex 样式以强制将页脚推到底部需要最大高度。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1 0 auto;
}

【讨论】：