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

Posted 2023-03-05

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

【英文标题】：Responsive footer in Angular with bootstrap that is always at the bottom of the page. Not Sticky

【发布时间】：2018-02-22 02:30:34

【问题描述】：

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

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

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

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

我在代码笔上找到的这个例子对我不起作用，但它正是我想要的行为。 - 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;

【问题讨论】：

能否提供代码块......

您好 Minal，一位同事确实帮助了我。我在下面发布了答案，因为我在互联网上找不到任何其他有效的东西。

【参考方案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;
        

【讨论】：

4 年后，这仍然适用于 Angular 4 和 Bootstrap 4 哈哈……没有投票。只是……犯罪。

这解决了 Bootstrap 4 垂直间距的粘性标题问题。我几乎放弃了它，尝试了您的代码，很高兴看到我有一个功能齐全的 Sticky 标头，无需操作主体顶部的填充或边缘。赞一个！