Highlighted

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

Explorer ,
May 25, 2018

Copy link to clipboard

Copied

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:

Screen Shot 2018-05-25 at 13.26.20.png

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:

Screen Shot 2018-05-25 at 13.27.46.png

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.

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>

TOPICS
Learn Dreamweaver

Views

3.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
May 25, 2018

Copy link to clipboard

Copied

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:

Screen Shot 2018-05-25 at 13.26.20.png

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:

Screen Shot 2018-05-25 at 13.27.46.png

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.

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>

TOPICS
Learn Dreamweaver

Views

3.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 25, 2018 0
Mentor ,
May 25, 2018

Copy link to clipboard

Copied

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*/

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2018 0
Explorer ,
May 25, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2018 0
New Here ,
Oct 13, 2018

Copy link to clipboard

Copied

ALsp You seem to think this site is for people who know what they're doing, strange....

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 13, 2018 0
ALsp LATEST
Mentor ,
Oct 14, 2018

Copy link to clipboard

Copied

It's important that when you post, you strive for clarity. The original poster was helped. Please don't take this the wrong way, but your post is neither helpful, relevant, or understandable..

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 14, 2018 1
LEGEND ,
May 25, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2018 1
Mentor ,
May 25, 2018

Copy link to clipboard

Copied

Good idea. My mind was locked in sticky mode 🙂

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2018 0
Explorer ,
May 25, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2018 0