CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3503511
user3503511

Reputation: 75

Creating a sticky bottom footer with internal wrapper which stretches from header to footer

I have made the main framework of my webpage in HTML / CSS but now realise that i need a sticky footer which is always stuck at the bottom of the screen so position fixed and i need the internal segment where all webpage content goes called (wrapper) to stretch from the bottom of the header to the top of the footer, so what i would like is that when you zoom out on the web browser the wight segment fits the whole height of the browser so that it would work on any display height.

Here is a JS fiddle

http://jsfiddle.net/Q8JpC/5/

If anyone finds out how to do this please could you write the code in stack overflow as a reply as this jsfiddle is just my test website and will not be using it for the real thing.

I have tried setting the wrapper as 

height:100vh;,

this does always fill the screens height but it does not allow for when i add content it does not extend to fit the content off the screen.

Thankyou very much for any help ! thanks

Upvotes: 0

Views: 60

Answers (1)

Yoeri
Yoeri

Reputation: 1906

didn't apply it to your design but i often use this technique: See: Modern sticky footers

I would also suggest to use html5 markup tags, they are created to get the semantics right instead of using classes like header, nag, footer, etc...

EDIT. I edited your fiddle here: JSFiddle

Just add:

html {
  position: relative;
  min-height: 100%; }

Besides that, change the body to position absolute instead of fixed and add a margin-body to the body element w(same as height of the footer).

Upvotes: 1

Related Questions