脚不会粘在页面底部

Question

在我的角度应用程序中，使页脚粘贴到页面底部非常困难。我尝试了许多不同的方法，但似乎无法弄清楚我在做什么错。我已经定义了容器div的高度，因此我知道了视口的大小，因此页脚应该能够识别视口的底部并停留在那里。但是，随着内容的增长，页脚不会随着内容的增长而增长。

HTML：

 <body style="margin:0; padding:0; height:100%;">
  <app-root></app-root>
</body>

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

1）错字错误css分配给ID#containerHTML用于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 2

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

此答案基于使用flexbox选项的Sticky Footer, Five Ways中的代码段。您可以在该文章中查看替代方法。

Answer 3

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

脚不会粘在页面底部

问题描述投票：0回答：3

3个回答

最新问题

脚不会粘在页面底部

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3