Question

在我的角度应用程序中，使页脚粘贴到页面底部非常困难。我尝试了许多不同的方法，但似乎无法弄清楚我在做什么错。我已经定义了容器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;   
}

Answer 1

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

这是我过去所做的事情，请注意内容就在其中，因此摘要按预期显示。

以下结构与您的问题类似。您可能需要将其分解为适合您的应用程序的组件。请注意，我使用类选择器而不是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中使用flexbox选项的代码段。您可以在该文章中查看替代方法。

Answer 2

1）错字错误css分配给ID #container HTML用于class

2）移除高度#container

3）将填充#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;   
}

Answer 3

将您的div放在单独的<div class="fixed-bottom"> <app-footer></app-footer> </div>中，并添加以下类：

.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

样式：

auth

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

页脚不会停留在页面底部

4 个答案: