页脚位于页面末尾，未固定 [英] Footer to be at the end of the page, not fixed

问题描述

我使用Bootstrap 4和angular 7.我的主要组件有页眉，组件位置和页脚.我的页眉和页脚是单独的组件.这是示例:

I use Bootstrap 4 and angular 7. I have main component where I have header, place for my component and footer. My header and footer is separate component. This is example:

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

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

I want to my footer to be on end of the page, not fixed. But hi is Always fixed. This is my footer:

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

推荐答案

使用弹性框.

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>

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

As you can see, the footer is always at the end of the page, provided that the container is the size of the said page.

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

If you uncomment the div, you will see the container expands and keeps your footer at the end of the page.

这篇关于页脚位于页面末尾，未固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！