Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how can i extend a footer to bottom of page?

Tags:

html

css

i have a layout like this

<section id="container">     <header></header>     <section id="main"></section>     <footer></footer> </section> 

At the moment my page is laid out like this:

------------------- |                 | 100px height |  HEADER         | |-----------------| |                 | |  MAIN           | 500px height |                 | |-----------------| |                 | |  FOOTER         | |-----------------| |                 | |                 | ------------------- 

I would like the footer to extend following the main content area to the bottom of the page, how can this be achieved?

------------------- |                 | 100px height |  HEADER         |  |-----------------| |                 | |  MAIN           | 500px height |                 | |-----------------| |                 | |  FOOTER         | |                 | |                 | |  FOOTER         | ------------------- 

NOTE: I have noticed all answers so far will pin the footer to tje bottom of the page, however when dragged the footer simply moves down/the main container expands, I want the footer to expand.

like image 756
Jai Avatar asked Mar 16 '12 17:03

Jai


People also ask

How do I get my footer to stay at the bottom of content?

Just wrap your . container and your . footer in a flex container with a min-height: 100vh, switch the direction to column so that they stack on top of each other, and justify the content with space between so that footer will move to the bottom.

How do I make my footer longer?

To change the height of header or footer, you can drag the height bigger or smaller as you need in Page Layout view. Then dragging the top margin up or down as you need to change the height of the header. If you want to change the height of footer, dragging bottom margin to resize.

Why does the footer not stick to the bottom?

The reason your footer is only halfway down the page with position: absolute is that you haven't set a min-height on the body and html elements. Without that, the body only takes up as much space as you have content for it -- and then the footer is aligned with that bottom, not the bottom of the window.


2 Answers

I was searching for a solution to this exact problem, and I came across a very simple way of achieving the effect I was going for:

footer {     box-shadow: 0 50vh 0 50vh #000; } 

This creates a shadow which will fall off the screen if not needed, but otherwise will give 100vh (a full viewport height's worth) of coverage to the space below the footer, so the body background doesn't appear below it.

like image 199
c4collins Avatar answered Sep 22 '22 01:09

c4collins


Although this is marked answered, it doesn't seem to fully answer the OPs question. I had the same challenge and here is what I found to work:

  1. Set your HTML & Body to 100% height
  2. Ensure all of your content, including your footer is wrapped with a big div (site-container)
  3. Fiddle with the space in the footer.

Here is the CSS:

html, body{     height: 100% }  .site-container{     overflow: hidden;     min-height: 100%;     min-width: 960px; }  .footer{     padding-bottom: 32000px;     margin-bottom: -32000px;  } 

I found this here: https://www.joestrong.co.uk/blog/2012/01/12/css-tip-extend-your-sites-footer-to-the-bottom-of-the-page/ which contains more info.

like image 34
Sam Straub Avatar answered Sep 22 '22 01:09

Sam Straub