-3

I have a site that sometimes doesn't have much content in the main section of the page. The footer then slides way up. I would like to have a consistent minimum height on all the pages that keeps the footer roughly close to the bottom of the average page. Many of the examples that I have seen radically modify the CSS and that concerns me in relation to keeping the site responsive.

In my example on Bootply I want to have the lime green area expand to "fill" the page from the bottom of the nav area to the top of the footer.

My Bootply example

John S
  • 7,909
  • 21
  • 77
  • 145
  • 1
    take a look here: http://getbootstrap.com/examples/sticky-footer/ – Sebsemillia Apr 20 '15 at 16:53
  • I'm not really looking for a sticky footer but an expanding content area. The issue with the sticky footer code is that it relies on a specific height footer. The footer height in my example will change based on the viewport /device screen size. – John S Apr 20 '15 at 17:02
  • Sticky footers also kinda break content when you have overflow, so I don't blame you there. – spasticninja Apr 20 '15 at 17:06

2 Answers2

1

If you want to work with full height on screen, try surrounding your code with a class i.e .fill and set the class .fill to height: 100%

.fill { 
    min-height: 100%;
    height: 100%;
}
Subhan
  • 1,544
  • 3
  • 25
  • 58
0

Make body,html{height:100%;}. Put a class wrapper around the body content (not including footer) have a .wrapper{ min-height: 100%; position:relative;}. Finally add .footer{position:absolute;}

Here is the extended answer: Make div stay at bottom of page's content all the time even when there are scrollbars

JSFiddle from the extended answer: http://jsfiddle.net/ELUGc/

Community
  • 1
  • 1
spasticninja
  • 681
  • 8
  • 16