Skip to main content
B
Brave_Rainbow0101
Inspiring
May 25, 2018
Answered

How do I get the footer to stay at the bottom of the page

  • May 25, 2018
  • 3 replies
  • 11809 views

Hi,

I feel really silly but I am stuck on a problem with the page footer.  I am trying to get it to remain at the bottom of the view port (but not be sticky) when there is not enough content to fill up the entire view port.

Here is an example of what happens when there is plenty of content on the page:

As you can see the footer is pushed to the bottom of the page properly.  It doesn't matter if there is too much content for the view port - the footer is pushed down to the bottom and correctly scrolls with as the content is scrolled up.  However; when there is not enough content to either fill up or extend beyond the view port, this happens:

As you can see the footer is not displaying correctly anymore - it has been pulled up to the bottom of the content instead of remaining at the bottom of the view port.  I have made various attempts to fix this myself using CSS but I have not been able.  I realise that this is a very simple problem but I just cant see what I have done wrong.

Will somebody please take a look at my code and tell me how to fix this problem?

My code is hosted in a public repo on GitHub - here is the code for index.html SocialFoxes/index.html at footer_issue · jaytelford/SocialFoxes · GitHub and here is the link to the CSS file SocialFoxes/defaults.css at footer_issue · jaytelford/SocialFoxes · GitHub

Also here is the link to the footer_issue branch on GitHub if you wanted to clone it so that you can test what I have done GitHub - jaytelford/SocialFoxes at footer_issue

Thanks in advance to you for all your help because this is driving me nuts

Jay

NB:

The defaults.css file is as it says - the default.  It is only there to define the very basic page layout.  Once I have the basic page layout working correctly, I will create main.css and use media queries to layout the page per viewport size and orientation but I want the default.css file to define the basic underlying structure first.

This topic has been closed for replies.
Correct answer osgood_

If you dont want the footer to be 'sticky' which to me implies you dont want it to be stuck to the foot on longer pages, only when the content is not enough,  then you can use Flexbox to make the footer always sit at the foot of the browser in 'short' pages. Example below:

<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

}

.page-wrapper {

display: flex;

flex-direction: column;

height: 100vh;

}

header {

background-color: #000;

}

header h1{

margin: 0;

padding: 20px;

color: #fff;

text-align: center;

}

.main-content-wrapper {

flex: 1;

background-color:#d5f50a;

}

.main-content {

width: 60%;

margin: 0 auto;

padding: 30px 0;

}

footer {

background-color: #000;

}

footer h2{

margin: 0;

padding: 20px;

color: #fff;

text-align: center;

}

</style>

</head>

<body>

<div class="page-wrapper">

<header>

<h1>Page Header</h1>

</header>

<div class="main-content-wrapper">

<section class="main-content">

<h2>Main Content</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>

<!-- end main-content -->

</div>

<!--  end main-content-wrapper -->

<footer>

<h2>Page Footer</h2>

</footer>

</div>

<!-- end page-wrapper -->

</body>

</html>

3 replies

B
Brave_Rainbow0101Author
Inspiring
May 25, 2018

I have fixed this for now, though I have fixed it in a rather hacky way that I don't like.

I think I am going to branch the skeleton and recode it with a flexbox layout.

Sadly, I have deleted the footer_issue branch without thinking so the links I provided now won't work but here is the link for the skel branch for anyone who comes to this question later.

SocialFoxes/ at skel · jaytelford/SocialFoxes · GitHub

You guys will also be able to see how I have fixed this but as I said, it's very hacky and I don't like it.  So think I am going to take the solution offered by @osgood_ and just recode before I get any further.

O
osgood_Correct answer
Legend
May 25, 2018

If you dont want the footer to be 'sticky' which to me implies you dont want it to be stuck to the foot on longer pages, only when the content is not enough,  then you can use Flexbox to make the footer always sit at the foot of the browser in 'short' pages. Example below:

<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

}

.page-wrapper {

display: flex;

flex-direction: column;

height: 100vh;

}

header {

background-color: #000;

}

header h1{

margin: 0;

padding: 20px;

color: #fff;

text-align: center;

}

.main-content-wrapper {

flex: 1;

background-color:#d5f50a;

}

.main-content {

width: 60%;

margin: 0 auto;

padding: 30px 0;

}

footer {

background-color: #000;

}

footer h2{

margin: 0;

padding: 20px;

color: #fff;

text-align: center;

}

</style>

</head>

<body>

<div class="page-wrapper">

<header>

<h1>Page Header</h1>

</header>

<div class="main-content-wrapper">

<section class="main-content">

<h2>Main Content</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>

<!-- end main-content -->

</div>

<!--  end main-content-wrapper -->

<footer>

<h2>Page Footer</h2>

</footer>

</div>

<!-- end page-wrapper -->

</body>

</html>

ALsp
ALsp
Legend
May 25, 2018

Good idea. My mind was locked in sticky mode :-)

(Inline flex and vertical bottom might also be a potential solution.)

ALsp
ALsp
Legend
May 25, 2018

You sound like you know a little coding, yet you also sound like you are expecting this to happen on its own. Strange. The footer element simply needs to be positioned fixed. You then need to estimate a content buffer and add it to the body element as bottom padding, to make sure you never lose content under the newly fixed footer. Start with:

.footer {

position: fixed;

z-index: 10;

box-sizing: border-box;

bottom: 0;

left: 0;

width: 100%;

}

body {

padding-bottom: 4em; /*adjust based on approximate rendered footer height*/

}

B
Brave_Rainbow0101Author
Inspiring
May 25, 2018

Hey, thanks for your reply.  You're right I do know how to code a bit but until now, I've only undertaken projects with the support of someone else.

This is my first project that I have done on my own without having anyone working with me.

There's a difference in having knowledge and having practical experience of working on your own.  Just because I have the knowledge doesn't mean the cracks aren't going to show or that I won't make a nooby mistake.

As I have done here it seems by not coding my layout correctly in the first place.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices