Question

我使用Bootstrap 4和angular 7。我的主要组件有页眉，组件位置和页脚。我的页眉和页脚是单独的组件。例如：

<app-header></app-header>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>
<app-footer></app-footer>

我希望页脚位于页面末尾，而不是固定的。但嗨是永远固定的。这是我的页脚：

<footer class="footer fixed-bottom">
    ...
</footer>

Answer 1

使用弹性框。

html, body {
  height: 100%;
}

.container {
  height: 100%;
  background: lightgray;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: column
}

header {
  flex: 0 0 50px;
  background: lightblue;
}

content {
  flex: 1;
  background: lightgreen;
}

footer {
  flex: 0 0 50px;
  background: coral;
}

<div class="container">
  <header></header>
  <content>
    <!-- <div style="height: 1800px"></div> -->
  </content>
  <footer></footer>
</div>

如您所见，如果容器是该页面的大小，则页脚始终位于页面的末尾。

如果取消对div的注释，您将看到容器扩展并将页脚保留在页面末尾。

Answer 2

从页脚标记中删除课程fixed-bottom

<footer class="footer">
    ...
</footer>

注意：如果页面内容未达到视图高度，则必须在页面上添加min-height样式，以便使页脚位于视图底部

HTML：

<div class="my-container">
  <!-- your page content -->
</div>

CSS：

.my-container {
  min-height: 800px;
  /* 800px as your view height, change it accordingly */
}

Answer 3

页面末尾，不固定。

如果要说的话：内容底部的页脚。直到我们将其向下滚动到页面的最后才能看到。

您只需要制作没有类的页脚标记即可解决您的问题。

<footer>
   //Your Footer Content
</footer>

页面末尾，不固定。

如果要说：Sticky Footer，而不是在footer.component.css中添加以下代码

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
}

页脚位于页面末尾，未固定

3 个答案: