0

I want to achieve this example but with the difference that in case there is too much content on my page (between navbar and footer) that this content is down-scaled / squeezed to fit inside (i.e. so that the footer is still visible at all screen resolutions, making it a "fixed footer" in CSS jargon). I'm using bootstrap 3.1.1 and it would be cool if anyone has a solution that is bootstrap-friendly :). Best!

MShekow
  • 1,526
  • 2
  • 14
  • 28

2 Answers2

1

You could always go with a fixed footer and have any additional content scroll underneath it. Heres a jsfiddle as an example:

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

body {
  margin-bottom: 1.5rem /* or whatever your fixed footer height is */
 }

/* and assuming your footer has id="footer"  */
#footer { 
   position: fixed;
   bottom: 0;
   height: 1.5rem;
   overflow: hidden;
   }
CEich
  • 31,956
  • 1
  • 16
  • 15
  • That's already a good point, thanks. Any ideas, though, how to have the text div to be scaled down to fit exactly right into the remaining space? – MShekow May 02 '14 at 10:15
0

Please see this answer here, and the example it refers to here. It's going to be a bit different I assume if you've got pictures and everything though. If you could provide an example of your content on jsFiddle we could probably help you scale it a little better.

Community
  • 1
  • 1
dcclassics
  • 896
  • 1
  • 12
  • 38
  • That solution uses JS. So to me it seems that doing that in just CSS isn't possible. In either case, the example addresses the whole body, while I am wondering whether this technique can be applied to just one particular div. – MShekow May 10 '14 at 07:46