Angular 2 sticky footer impementation
Question
I want my footer to be a sticky footer and tried following the css tricks negative margin trick, but did not work. I tried to impersonate my angular2 app in the below plunker code. I want the sticker not be fixed but sticky and go to the bottom when there are more content available in the main section. Note the footer is displayed above the data in the main section.
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>
Any help to fix and move the footer down is appreciated.
4 answers
solution1
8 2018-07-04 08:10:28
You can still follow this example mentioned by https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Simply add this code to styles.scss
html,
body {
height: 100%;
}
In your app.component.scss
:host {
display: flex;
min-height: 100%; // used percent instead of vh due to safari bug.
flex-direction: column;
}
.Site-content {
flex: 1;
}
In your app.component.html
<header>...</header>
<main class="Site-content">..</main>
<footer>...</footer>
solution2
6 ACCPTED 2017-02-28 23:06:30
There are several ways to achieve this. I'm assuming you've tried one of these: CSS-tricks - Sticky footer, five ways .
For that to work, you would need to:
- Remove absolute positioning of both the footer and the content.
- Remove default top and bottom margins from body.
- If you are not going with the flexbox or grid option, then place all content except for the footer inside of one element (so you can make sure the total height of that element plus the footer is at least the height of the viewport) .
Here is an implementation of your Angular2 app with a sticky footer.
The sticky footer is achieved by wrapping all of the main content in a single div and using calc() to set it's minimum height to 100vh minus the footer's height.
solution3
1 2017-02-28 23:26:59
I think it's not a good idea to make position:absolute for your .main block. Absolute positioning for your footer will be enough. Try something like this
html { height: 100%; } body { min-height: 100%; position: relative; } .main { min-height: 100%; padding-bottom: 55px; } #footer { position: absolute; bottom: 0; }
Also remove margins and padding-top from .main block styles
solution4
1 2020-03-26 21:55:39
You just have to edit 2 files:
index.html:
<!-- Full height body -->
<body class="pt-3 h-100">
<!-- Full height app container, and also use flexbox columns -->
<app-root class="d-flex flex-column h-100"></app-root>
</body>
app.component.html:
<router-outlet></router-outlet>
<!-- Footer top margin must be set on auto -->
<app-footer class="mt-auto"></app-footer>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.