Angular 2粘性页脚阻碍

我想让我的页脚成为粘性页脚，并尝试遵循CSS技巧负边距技巧，但没有奏效。我试图在下面的plunker代码中模拟我的angular2应用程序。我希望标签不要固定，而要粘贴，并在主要部分有更多可用内容时进入底部。注意页脚显示在主要部分的数据上方。Angular 2粘性页脚阻碍

http://plnkr.co/edit/WSUC4xLMWH6fY77UyFqI?p=preview&open=app%2Fapp.component.ts

app.component：

<nav-bar></nav-bar> 
    <section class="main"> 
    <div class="main-container"> 
     Display my router-outlet here   
     <ul> 
     <li *ngFor="let hero of heroes"> 
     {{ hero }} 
     </li> 
    </ul> 

    </div> 
    </section> 
    <footer-component></footer-component>

任何帮助固定和移动页脚下来表示赞赏。

来源

2017-02-28 John Jai

不能完全确定你的目标是去除边距和填充顶，但你的样式类“主”有绝对的位置。 –

如果我删除它，那么文本显示在导航栏部分下方。谢谢！ –

有几种方法可以实现这一点。我假设你已经尝试过其中的一种：CSS-tricks - Sticky footer, five ways。

对于工作，你将需要：

删除页脚和内容的绝对定位。
删除身体的默认顶部和底部边距。
如果不打算使用flexbox或grid选项，请将除footer以外的所有内容放在之内 element （因此，您可以确保该元素加上页脚的总高度至少为视口）。

Here是您的Angular2应用程序的一个粘滞页脚的实现。

粘性页脚是通过将所有主要内容包装在一个div中并使用calc()将其最小高度设置为100vh减去页脚高度来实现的。

来源

2017-02-28 23:06:30

对不起，但我不希望脚注固定，但粘性。当有更多的内容时，它应该放在页面上。我会更新我的问题。 –

明白了。我更新了我的答案。 –

我接受这个答案，虽然在我的真实应用程序中，一旦我删除了'position：absolute'，导航栏部分就会被推下来，应用程序看起来很笨拙。猜测，因为有更多的真正的应用程序中使用的CSS（网格等） –

我认为这是不是一个好主意，使您的.main块的位置：绝对。绝对定位你的页脚就足够了。尝试是这样的

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    min-height: 100%; 
 
    position: relative; 
 
} 
 

 
.main { 
 
    min-height: 100%; 
 
    padding-bottom: 55px; 
 
} 
 

 
#footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
}

而且从。主要块样式

来源

2017-02-28 23:26:59 disstruct

谢谢，但如果我从主要删除绝对位置，然后文本显示在导航栏部分下方。 –

什么文字？ .main阻止文本。您可以从.main块 – disstruct

中删除页边距和paddint页顶。是的，删除它们后，主块文本的顶部将位于导航栏部分的下方。 –

Angular 2粘性页脚阻碍

回答

相关问题