Fixed footer not pushed down by scroll content - html

I am working on a layout with the following attributes:
Fixed header (content should scroll up under it)
Fixed 100% height column (left menu)
Content area
Footer that A. sticks to bottom if content is short, or, B. is pushed down with longer content (off screen)
I have managed to get 1,2,3 and 4 A. working. But I can't get the footer to get pushed down by the longer content. I based my initial workings on css reset (example here:http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/), but, I am assuming that my fixed header and left column are not helping.
I'd really appreciate any pointers/suggestions on how I might overcome this.
Here is my code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>Layout</title>
<style type="text/css">
html,
body { height: 100%; padding:0;margin:0; }
#sc_admin_wrapper {
min-height:100%;
position:relative;
background:#fff;
margin: 0;
}
#sc_admin_header{
width:100%;
height:50px;
position:fixed;
top:0;
background: #212121;
z-index:9995;
color:#fff;
}
#sc_admin_logo {
width:20%;
float: left;
}
#sc_admin_menu {
position:fixed;
top:50px;
bottom:0;
float:left;
width: 20%;
margin: 0;
background: #3d3d3d;
color: #fff;
}
#sc_admin_content {
float: left;
margin:50px 0 0 20%;
width: 77%;
padding: 0.5% 1.5% 30px 1.5%;
}
#sc_admin_footer {
background: #ffcc00;
width: 77%;
height: 30px;
position:absolute;
bottom:0;
left:0;
margin: 0px 0 0 20%;
padding: 0 1.5% 0 1.5%;
}
</style>
</head>
<body>
<div id="sc_admin_wrapper">
<div id="sc_admin_header">
<div id="sc_admin_logo"><h1>Fixed header</h1></div>
<div class="clear"></div>
</div>
<!-- / #sc_admin_header -->
<div id="sc_admin_menu">
<p>Fixed height column at 100%;</p>
<div class="clear"></div>
</div>
<!-- / #sc_admin_menu -->
<div id ="sc_admin_content">
<div id="sc_msgs"></div>
<p>This would be my short or long content.</p>
<p>I should scroll under the header.</p>
<p>My footer should be fixed at the bottom of the screen if content is
short, or, scroll should the content be longer.</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>
<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>
<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>
<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>
<div class="clear"></div>
</div>
<!-- / #sc_admin_content -->
<div id="sc_admin_footer">
This is my fixed footer
<div class="clear"></div>
</div>
<!-- / #sc_admin_footer -->
</div>
<!-- / #sc_admin_wrapper -->
</body>
</html>


Hmmm, I think you you almost got it right! You just missed a couple CSS/structural details. You need to add a style definition for the .clear class, as follows:
.clear{
clear:both;
}
Then, you need to move the .clear div element at the bottom of .sc_admin_content out of it, so that it lies in between .sc_admin_content and .sc_admin_footer.
Here's a JSFiddle example of what this would then look like. (Try deleting content and pressing "Run", and see that the footer stays stuck to the bottom!) If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!


Use four z-layers in your code:
At the top, put your text with opaque background.
In the layer below it, put one copy of your footer using position: fixed; in its class.
In the layer below that, have a div that is height: 100%; width: 100% and is opaque (i.e., has the same background color as your text) and travels with your text on scroll.
In the layer below that, put another copy of your footer that will travel with your text on scroll.
The z-order of these elements might not produce the exact effect, but it should point you in the right direction.

Related

How to add an image in only one section?

image cant seem to fit in just one section and keep overflowing to another section.
tried putting tag in between but does not seems to work, img keep showing in two section.also tried the width and padding but i can't move the img to the left. can anyone help with only css and html? can't use js on this project.
#section1 {
height: 580px;
width: 1519px;
background-color: #0E2E3B;
padding: 50px;
}
<body>
<section id="section1">
</section>
<section class="main" id="section2" id="profil">
<h1>Lorem</h1>
<h2>Lorem</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>
<img src="pancasila.jpg">
</section>
<body>
the html code

If you want to have same ratio you should create a container and hide parts of the image. Follow like this with an additional CSS file. Tweak the parameters in the CSS file as you wish and you can get your desired results.
HTML
<body>
</section>
<section class="main" id="section2" id="profil">
<h1>Lorem</h1>
<h2>Lorem</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>
<img class="img" src="pancasila.jpg">
</section>
</body>
CSS
.container{
width:100%;
height:60px;
overflow:hidden;
}
.img {
width:100%;
}

Try adding some css for img. Also you first section doesn't seem to have opening tag.
img { width: 100% }

CSS max-height based on scroll position

Is there a CSS only trick to make this happen:
An element is placed in position absolute x,y on the screen. The document has a vertical scroll depending on its content. Can the height be controlled based on the available visible viewport area?
Exampe 1:
Exampe 2:
HTML:
<div id="dialog">
Change my height with no JS :)
</div>
<div id="content">
... content
</div>
JS Fiddle: https://jsfiddle.net/8dj4xz2q/

yes it is you can do this using VH property and also using css calc to calculate right height.
check out the snippet.
#content{
font-size:100px;
color:#CCC;
}
#dialog {
position:absolute;
top:100px;
left:100px;
border: solid 1px red;
height:calc(100vh - 130px);
overflow-y:scroll;
width:200px
}
<div id="dialog">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>

Stretch container to bottom but allow it to extend if more content

I'm looking for a better to a solution to the problem of not having enough content to fill the screen.
Usually, if you want to fill the screen you either make the HTML, body heights 100% and then your container 100% or just use 100vh like in my JSFiddle below.
The problem is if the content does eventually stretch past 100% height of the screen it gets cut off.
I was wondering if there was a way (maybe with flexbox) where you could have 100% height but also if the content goes past 100% the container expands in size.
html, body
{
padding: 0;
margin: 0;
}
.content
{
background: grey;
/* height: 100vh; - this works but if content goes past 100vh it gets cut off */
}
<div class="content">
<span>
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.
</span>
</div>

Use a container around the content to which you apply 100vh and display: flexand now the content can be made a column flexbox - see demo below and updated fiddle:
html,
body {
padding: 0;
margin: 0;
}
.wrapper {
min-height: 100vh;
display: flex;
}
.content {
background: grey;
display: flex;
flex-direction: column;
}
<div class="wrapper">
<div class="content">
<div>
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.
</div>
<div>
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.
</div>
<div>
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.
</div>
</div>
</div>

You are just missing the overflow: auto; in your .content div
Your Fiddle updated
body {
padding: 0;
margin: 0;
height: 100%;
}
.content {
background: grey;
height: 100%;
overflow: auto;
}

How would I dynamically resize 4 images in one div based on the height of another div?

I have a grid with one div taking up around 30% and the other 70%. In the 30% div, I have 4 images stacked vertically. In the 70% div I have content. How could I dynamically resize and crop the 4 images equally so they equal the height of the 70% content div. I know I could resize the images manually, but I'd like them to auto-adjust if content is added or removed. Also, the design is responsive. Here is a jsfiddle:
http://jsfiddle.net/fETtm/
Here is my HTML:
<section>
<div id="inner-content" class="wrap">
<aside class="fourcol first">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
</aside>
<article class="eightcol">
<h3>H3 Title</h3>
<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>
<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>
</article>
</div>
</section>
Thank you for any help.

overflow: hidden will cut anything outside the element it is applied (here .wrap your container).
Demo: http://jsfiddle.net/fETtm/1/
By removing your images from the flow (position: absolute), only the right column is still in the flow and will define the size of its container. Now any bit of image that is outside this box won't be displayed.
As the left column was removed from the flow, your text now occupies the whole width of its container so it needs padding-left (same value as the width of your images).
HTML: same as yours
CSS:
.wrap {
position: relative;
overflow: hidden;
outline: 1px dashed purple;
max-width: 1140px;
width: 96%;
margin: 0 auto;
}
.fourcol {
width: 31.491712705%;
position: absolute;
}
.eightcol {
width: 65.74585634900001%;
position: relative;
float: left;
margin-left: 2.762430939%;
padding-left: 31.491712705%;
}
.first {
margin-left: 0;
}

How can I force my footer to stick to the bottom of any page in CSS?

This is my code:
#footer {
font-size: 10px;
position:absolute;
bottom:0;
background:#ffffff;
}
I've no idea what is wrong with this - can anyone help?
EDIT: For some more clarity on what's wrong: The footer is displayed on the bottom as expected when the page loads. However, when the web page's height is > than the dimensions on the screen such that a scroll bar appears, the footer stays in that same location. That is to say, when the height of the page is <= 100%, the footer is at the bottom. However, when the page height is >100%, the footer is NOT at the bottom of that page, but at the bottom of the visible screen instead.
EDIT: Surprisingly, none of the solutions below worked. I ended up implementing a sidebar instead.

You're probably looking for this example:
<div class="wrapper">
Your content here
<div class="push"></div>
</div>
<div class="footer">
Your footer here
</div>
CSS:
For a 142-pixel footer
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/

Try this:
position: fixed;
bottom: 0;

I had the same question, came here looking for an answer, didn't find it, then tried a few experiments on my own, and finally got the solution:
#body {
overflow-y: 0 auto;
}
#footer {
position: fixed;
top: 100vh; left: 0;
margin-top: -100px;
width: 100%; height: 100px;
padding: 10px;
color: #fff; background-color: rgba(0,0,0,0.6);
}
<div id="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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 adipiscing 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>
</div>
<div id="footer">
<span>Some dummy Text</span>
</div>

The wrapper is the rest of your page. The negative/positive margin/height values are where the magic happens.
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
}
.footer, .push
{
height: 142px; /* .push must be the same height as .footer */
}

#footer { clear:both; position:fixed; width:100%; height:50px; bottom:0; background:black;}

Do not use position: absolute; for any footer as the page will change in height. If it is absolute then your footer will not move with the page height.
You want to use ryan fait's method.
Although I would personally do it like this;
.wrap {margin: auto; width: 980px;}
#content {min-height: 600px;}
#footer {height: 300px;}
<div class="wrap">
<div id="content">
</div>
</div>
<div id="footer">
<div class="wrap">
</div>
</div>
This way you don't have to mess around with negative margins and padding. Also this can easily be a part of html5 changing #footer to
<footer>
</footer>

This is what I did and it caused my footer to stay at the bottom.
.footer2{
background-color:#606060 ;
color: #ffffff;
height: 30px;
bottom:0px;
position:fixed;
width:100%;
}

.footer-small, .push {
background-color: #2C3E50;
position: fixed;
padding-top: 5px;
clear:both;
width: 100%;
bottom:0px;
z-index: 0;
}
this is also working for me....

I struggled to find a solution, as none of the suggested achieved what I wanted:
If there is to less content, stay at the bottom of the page, not in the middle.
If there is enough content, do not be stick and overlap the content, just stay at the bottom.
Hide it from the first sight, so only if the user scrolls down the footer is seen.
This is what worked for me:
html:
<body>
<div class="page-wrapper">
<h1>
Page
</h1>
</div>
<footer>
Footer here
</footer>
</body>
css:
body {
height: 100%;
width: 100%;
}
.page-wrapper {
min-height:100vh; /*1vh = 1% of browser screen height*/
}
footer{
position: relative;
width: 100%;
bottom: 0px;
}
Here in action.

Why not with jquery?
Put a wrapper div between header and footer and assign min-height property for wrapper with jquery equal with the difference between document height and (header height + footer height).
<script type="text/javascript">
$(document).ready(function(){
var dh = $(document).height(); //document height here
var hh = $('header').height(); //header height
var fh = $('footer').height(); //footer height
var wh = Number(dh - hh - fh); //this is the height for the wrapper
$('#wrapper').css('min-height', wh); //set the height for the wrapper div
});
</script>