Mixing
Additional white Space after Footer in Angular application
I am working on an Angular 6 application along with bootstrap 4. The issue I am facing is there is an extra space after my footer and which looks very odd. My app.component.html has code as below
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
The app-header has content in the form of navbar,the router-outlet holds dynamic content as per the routing urls.The app-footer has footer content as below
<div style="text-align:center;background-color: rgb(209, 226, 230);">
<br>
This is my footer
</div>
If the dynamic content inside the router-outlet is more in size the footer sticks to the bottom perfectly but if the content is small in size the footer moves up and leaves an additional space below it which does not seem to be coming due to any tag. So where is this additional space coming from?
angular bootstrap-4 edited Jan 1 at 17:02
James Z
11.2k71936
asked Jan 1 at 15:33
Sachin ChandraSachin Chandra
923
add a comment |
I am working on an Angular 6 application along with bootstrap 4. The issue I am facing is there is an extra space after my footer and which looks very odd. My app.component.html has code as below
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
The app-header has content in the form of navbar,the router-outlet holds dynamic content as per the routing urls.The app-footer has footer content as below
<div style="text-align:center;background-color: rgb(209, 226, 230);">
<br>
This is my footer
</div>
If the dynamic content inside the router-outlet is more in size the footer sticks to the bottom perfectly but if the content is small in size the footer moves up and leaves an additional space below it which does not seem to be coming due to any tag. So where is this additional space coming from?
angular bootstrap-4 edited Jan 1 at 17:02
James Z
11.2k71936
asked Jan 1 at 15:33
Sachin ChandraSachin Chandra
923
add a comment |
I am working on an Angular 6 application along with bootstrap 4. The issue I am facing is there is an extra space after my footer and which looks very odd. My app.component.html has code as below
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
The app-header has content in the form of navbar,the router-outlet holds dynamic content as per the routing urls.The app-footer has footer content as below
<div style="text-align:center;background-color: rgb(209, 226, 230);">
<br>
This is my footer
</div>
If the dynamic content inside the router-outlet is more in size the footer sticks to the bottom perfectly but if the content is small in size the footer moves up and leaves an additional space below it which does not seem to be coming due to any tag. So where is this additional space coming from?
angular bootstrap-4 edited Jan 1 at 17:02
James Z
11.2k71936
asked Jan 1 at 15:33
Sachin ChandraSachin Chandra
923
I am working on an Angular 6 application along with bootstrap 4. The issue I am facing is there is an extra space after my footer and which looks very odd. My app.component.html has code as below
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
The app-header has content in the form of navbar,the router-outlet holds dynamic content as per the routing urls.The app-footer has footer content as below
<div style="text-align:center;background-color: rgb(209, 226, 230);">
<br>
This is my footer
</div>
If the dynamic content inside the router-outlet is more in size the footer sticks to the bottom perfectly but if the content is small in size the footer moves up and leaves an additional space below it which does not seem to be coming due to any tag. So where is this additional space coming from?
angular bootstrap-4 angular bootstrap-4 edited Jan 1 at 17:02
James Z
11.2k71936
asked Jan 1 at 15:33
Sachin ChandraSachin Chandra
923
edited Jan 1 at 17:02
James Z
11.2k71936
asked Jan 1 at 15:33
Sachin ChandraSachin Chandra
923
edited Jan 1 at 17:02
James Z
11.2k71936
edited Jan 1 at 17:02
James Z
11.2k71936
edited Jan 1 at 17:02
James Z
11.2k71936
11.2k71936
asked Jan 1 at 15:33
Sachin ChandraSachin Chandra
923
asked Jan 1 at 15:33
Sachin ChandraSachin Chandra
923
asked Jan 1 at 15:33
Sachin ChandraSachin Chandra
923
923
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Ok I tried by removing the position:absolute and adding the min-height: 80vh. And this works perfectly for me.This is what I was looking for.So the vh or viewport height works in this case.
answered Jan 1 at 17:10
Sachin ChandraSachin Chandra
923
add a comment |
Edited answer:
You can set min-height: 80vh to your contact block thus, it will occupy at least 80% of the height of the viewport and the footer will appear near the bottom of the screen.
Original answer:
If you want your footer to always be at the bottom you can use:
position:absolute;
bottom:0;
Here is a working example:
footer{
text-align: center;
background-color: rgb(209, 226, 230);
padding-top:1rem;
position:absolute;
bottom:0;
right:0;
left:0;
}<div><h1>Contact Us</h1></div>
<footer>This is my footer</footer>answered Jan 1 at 15:48
MaartiMaarti
1,8543822
First of all thanks for the quick reply. This works fine for the contact us page(my footer moves at the bottom of my page) but my home page has a 3 carousel sliders one after another and now it happens that my footer overlaps on the first carousel of the home page since (position:absolute is what we have defined in css).If I use (position:relative) my home page works fine but again in contact us page footer moves up.So in both the cases one is compromised over the other.
– Sachin Chandra
Jan 1 at 16:32
You know, what you see is relative to the size of your window, a user on mobile will see the footer at the bottom while a user with a very large screen will see the footer as on your screenshot. Maybe what you want to do is set amin-height: 80vhto your contact block thus, it will occupy at least 80% of the height of the viewport and the footer will appear near the bottom of the screen. (Remove theposition:absoluteif you do that.)
– Maarti
Jan 1 at 16:43
Ok I tried by removing the position:absolute and adding the min-height: 80vh. And this works perfectly for me.This is what I was looking for.So the vh or viewport height works in this case.Thanks a lot.
– Sachin Chandra
Jan 1 at 17:10
Happy to hear it, so I edited my answer.
– Maarti
Jan 1 at 17:12
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996693%2fadditional-white-space-after-footer-in-angular-application%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Ok I tried by removing the position:absolute and adding the min-height: 80vh. And this works perfectly for me.This is what I was looking for.So the vh or viewport height works in this case.
answered Jan 1 at 17:10
Sachin ChandraSachin Chandra
923
add a comment |
Ok I tried by removing the position:absolute and adding the min-height: 80vh. And this works perfectly for me.This is what I was looking for.So the vh or viewport height works in this case.
answered Jan 1 at 17:10
Sachin ChandraSachin Chandra
923
add a comment |
Ok I tried by removing the position:absolute and adding the min-height: 80vh. And this works perfectly for me.This is what I was looking for.So the vh or viewport height works in this case.
answered Jan 1 at 17:10
Sachin ChandraSachin Chandra
923
Ok I tried by removing the position:absolute and adding the min-height: 80vh. And this works perfectly for me.This is what I was looking for.So the vh or viewport height works in this case.
answered Jan 1 at 17:10
Sachin ChandraSachin Chandra
923
answered Jan 1 at 17:10
Sachin ChandraSachin Chandra
923
answered Jan 1 at 17:10
Sachin ChandraSachin Chandra
923
answered Jan 1 at 17:10
Sachin ChandraSachin Chandra
923
923
add a comment |
add a comment |
Edited answer:
You can set min-height: 80vh to your contact block thus, it will occupy at least 80% of the height of the viewport and the footer will appear near the bottom of the screen.
Original answer:
If you want your footer to always be at the bottom you can use:
position:absolute;
bottom:0;
Here is a working example:
footer{
text-align: center;
background-color: rgb(209, 226, 230);
padding-top:1rem;
position:absolute;
bottom:0;
right:0;
left:0;
}<div><h1>Contact Us</h1></div>
<footer>This is my footer</footer>answered Jan 1 at 15:48
MaartiMaarti
1,8543822
First of all thanks for the quick reply. This works fine for the contact us page(my footer moves at the bottom of my page) but my home page has a 3 carousel sliders one after another and now it happens that my footer overlaps on the first carousel of the home page since (position:absolute is what we have defined in css).If I use (position:relative) my home page works fine but again in contact us page footer moves up.So in both the cases one is compromised over the other.
– Sachin Chandra
Jan 1 at 16:32
You know, what you see is relative to the size of your window, a user on mobile will see the footer at the bottom while a user with a very large screen will see the footer as on your screenshot. Maybe what you want to do is set amin-height: 80vhto your contact block thus, it will occupy at least 80% of the height of the viewport and the footer will appear near the bottom of the screen. (Remove theposition:absoluteif you do that.)
– Maarti
Jan 1 at 16:43
Ok I tried by removing the position:absolute and adding the min-height: 80vh. And this works perfectly for me.This is what I was looking for.So the vh or viewport height works in this case.Thanks a lot.
– Sachin Chandra
Jan 1 at 17:10
Happy to hear it, so I edited my answer.
– Maarti
Jan 1 at 17:12
add a comment |
Edited answer:
You can set min-height: 80vh to your contact block thus, it will occupy at least 80% of the height of the viewport and the footer will appear near the bottom of the screen.
Original answer:
If you want your footer to always be at the bottom you can use:
position:absolute;
bottom:0;
Here is a working example:
footer{
text-align: center;
background-color: rgb(209, 226, 230);
padding-top:1rem;
position:absolute;
bottom:0;
right:0;
left:0;
}<div><h1>Contact Us</h1></div>
<footer>This is my footer</footer>answered Jan 1 at 15:48
MaartiMaarti
1,8543822
First of all thanks for the quick reply. This works fine for the contact us page(my footer moves at the bottom of my page) but my home page has a 3 carousel sliders one after another and now it happens that my footer overlaps on the first carousel of the home page since (position:absolute is what we have defined in css).If I use (position:relative) my home page works fine but again in contact us page footer moves up.So in both the cases one is compromised over the other.
– Sachin Chandra
Jan 1 at 16:32
You know, what you see is relative to the size of your window, a user on mobile will see the footer at the bottom while a user with a very large screen will see the footer as on your screenshot. Maybe what you want to do is set amin-height: 80vhto your contact block thus, it will occupy at least 80% of the height of the viewport and the footer will appear near the bottom of the screen. (Remove theposition:absoluteif you do that.)
– Maarti
Jan 1 at 16:43
Ok I tried by removing the position:absolute and adding the min-height: 80vh. And this works perfectly for me.This is what I was looking for.So the vh or viewport height works in this case.Thanks a lot.
– Sachin Chandra
Jan 1 at 17:10
Happy to hear it, so I edited my answer.
– Maarti
Jan 1 at 17:12
add a comment |
Edited answer:
You can set min-height: 80vh to your contact block thus, it will occupy at least 80% of the height of the viewport and the footer will appear near the bottom of the screen.
Original answer:
If you want your footer to always be at the bottom you can use:
position:absolute;
bottom:0;
Here is a working example:
footer{
text-align: center;
background-color: rgb(209, 226, 230);
padding-top:1rem;
position:absolute;
bottom:0;
right:0;
left:0;
}<div><h1>Contact Us</h1></div>
<footer>This is my footer</footer>answered Jan 1 at 15:48
MaartiMaarti
1,8543822
Edited answer:
You can set min-height: 80vh to your contact block thus, it will occupy at least 80% of the height of the viewport and the footer will appear near the bottom of the screen.
Original answer:
If you want your footer to always be at the bottom you can use:
position:absolute;
bottom:0;
Here is a working example:
footer{
text-align: center;
background-color: rgb(209, 226, 230);
padding-top:1rem;
position:absolute;
bottom:0;
right:0;
left:0;
}<div><h1>Contact Us</h1></div>
<footer>This is my footer</footer>footer{
text-align: center;
background-color: rgb(209, 226, 230);
padding-top:1rem;
position:absolute;
bottom:0;
right:0;
left:0;
}<div><h1>Contact Us</h1></div>
<footer>This is my footer</footer>footer{
text-align: center;
background-color: rgb(209, 226, 230);
padding-top:1rem;
position:absolute;
bottom:0;
right:0;
left:0;
}<div><h1>Contact Us</h1></div>
<footer>This is my footer</footer>answered Jan 1 at 15:48
MaartiMaarti
1,8543822
edited Jan 1 at 17:12
answered Jan 1 at 15:48
MaartiMaarti
1,8543822
answered Jan 1 at 15:48
MaartiMaarti
1,8543822
answered Jan 1 at 15:48
MaartiMaarti
1,8543822
1,8543822
First of all thanks for the quick reply. This works fine for the contact us page(my footer moves at the bottom of my page) but my home page has a 3 carousel sliders one after another and now it happens that my footer overlaps on the first carousel of the home page since (position:absolute is what we have defined in css).If I use (position:relative) my home page works fine but again in contact us page footer moves up.So in both the cases one is compromised over the other.
– Sachin Chandra
Jan 1 at 16:32
You know, what you see is relative to the size of your window, a user on mobile will see the footer at the bottom while a user with a very large screen will see the footer as on your screenshot. Maybe what you want to do is set amin-height: 80vhto your contact block thus, it will occupy at least 80% of the height of the viewport and the footer will appear near the bottom of the screen. (Remove theposition:absoluteif you do that.)
– Maarti
Jan 1 at 16:43
Ok I tried by removing the position:absolute and adding the min-height: 80vh. And this works perfectly for me.This is what I was looking for.So the vh or viewport height works in this case.Thanks a lot.
– Sachin Chandra
Jan 1 at 17:10
Happy to hear it, so I edited my answer.
– Maarti
Jan 1 at 17:12
add a comment |
First of all thanks for the quick reply. This works fine for the contact us page(my footer moves at the bottom of my page) but my home page has a 3 carousel sliders one after another and now it happens that my footer overlaps on the first carousel of the home page since (position:absolute is what we have defined in css).If I use (position:relative) my home page works fine but again in contact us page footer moves up.So in both the cases one is compromised over the other.
– Sachin Chandra
Jan 1 at 16:32
You know, what you see is relative to the size of your window, a user on mobile will see the footer at the bottom while a user with a very large screen will see the footer as on your screenshot. Maybe what you want to do is set amin-height: 80vhto your contact block thus, it will occupy at least 80% of the height of the viewport and the footer will appear near the bottom of the screen. (Remove theposition:absoluteif you do that.)
– Maarti
Jan 1 at 16:43
Ok I tried by removing the position:absolute and adding the min-height: 80vh. And this works perfectly for me.This is what I was looking for.So the vh or viewport height works in this case.Thanks a lot.
– Sachin Chandra
Jan 1 at 17:10
Happy to hear it, so I edited my answer.
– Maarti
Jan 1 at 17:12
First of all thanks for the quick reply. This works fine for the contact us page(my footer moves at the bottom of my page) but my home page has a 3 carousel sliders one after another and now it happens that my footer overlaps on the first carousel of the home page since (position:absolute is what we have defined in css).If I use (position:relative) my home page works fine but again in contact us page footer moves up.So in both the cases one is compromised over the other.
– Sachin Chandra
Jan 1 at 16:32
First of all thanks for the quick reply. This works fine for the contact us page(my footer moves at the bottom of my page) but my home page has a 3 carousel sliders one after another and now it happens that my footer overlaps on the first carousel of the home page since (position:absolute is what we have defined in css).If I use (position:relative) my home page works fine but again in contact us page footer moves up.So in both the cases one is compromised over the other.
– Sachin Chandra
Jan 1 at 16:32
You know, what you see is relative to the size of your window, a user on mobile will see the footer at the bottom while a user with a very large screen will see the footer as on your screenshot. Maybe what you want to do is set a
min-height: 80vh to your contact block thus, it will occupy at least 80% of the height of the viewport and the footer will appear near the bottom of the screen. (Remove the position:absolute if you do that.)– Maarti
Jan 1 at 16:43
You know, what you see is relative to the size of your window, a user on mobile will see the footer at the bottom while a user with a very large screen will see the footer as on your screenshot. Maybe what you want to do is set a
min-height: 80vh to your contact block thus, it will occupy at least 80% of the height of the viewport and the footer will appear near the bottom of the screen. (Remove the position:absolute if you do that.)– Maarti
Jan 1 at 16:43
Ok I tried by removing the position:absolute and adding the min-height: 80vh. And this works perfectly for me.This is what I was looking for.So the vh or viewport height works in this case.Thanks a lot.
– Sachin Chandra
Jan 1 at 17:10
Ok I tried by removing the position:absolute and adding the min-height: 80vh. And this works perfectly for me.This is what I was looking for.So the vh or viewport height works in this case.Thanks a lot.
– Sachin Chandra
Jan 1 at 17:10
Happy to hear it, so I edited my answer.
– Maarti
Jan 1 at 17:12
Happy to hear it, so I edited my answer.
– Maarti
Jan 1 at 17:12
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996693%2fadditional-white-space-after-footer-in-angular-application%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
