Angular 中的响应式页脚，带有始终位于页面底部的引导程序。不粘

Question

我正在尝试为我正在开发的网站制作响应式页脚。 即使页面内容只占页面的一半，页脚也需要始终位于页面的末尾/底部。

我已尝试使用此示例中的代码，但无法正常工作。

页脚不能粘滞，它必须在滚动到页面底部后显示页面的所有内容，或者如果没有内容，则它必须位于页面底部。

我有一个页脚和一个页眉组件，它们显示在我的应用组件中。

我在代码笔上找到的这个例子对我不起作用，但它正是我想要的行为。 - https://codepen.io/anon/pen/OxJooY

<div class="demo">
  <h1>CSS “Always on the bottom” Footer</h1>
   <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
   <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
   <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
   <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

//我的应用组件的css文件

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}



.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

Answer 1

//将此添加到应用程序组件HTML文件和应用程序组件css文件中

<div class="page-wrapper">
    <div class="sticky-header">
        <app-header></app-header>   /* your header component */
    </div>
    <div class="content-wrapper">
        <div class="content">
            Your content goes here or another page's component.
        </div>
        <div class="footer">
            <app-footer></app-footer>  /* your footer component */
        </div>
    </div>
</div>


        .page-wrapper {
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .sticky-header {
            flex-grow: 0;
            min-height: 60px; /* whatever you want it to be */
        }

        .content-wrapper {
            flex-grow: 1;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
        }

        .content {
            flex-grow: 1;
        }

        .footer {
            min-height: 60px; /* whatever you want it to be */
            flex-grow: 0;
        }