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