Search code examples
csstwitter-bootstrapheightsticky-footer

fluid height in sticky footer

I'm stying bootstrap sticky footer on my project: http://twitter.github.com/bootstrap/examples/sticky-footer.html

Is it possible to set height of content to fill remained space? Let me explain. I want to reside image and I need to it gets sized relates to available height.

Solution

  • If your intention is fill any space between the end of the content and the start of the footer, I can see all sorts of challenges.

    Depending on the specifics of your image, maybe you can include it as a background like this:
    http://jsfiddle.net/panchroma/hBzjn/

    You could use media queries, possibly with different images at different viewponts and also use padding to refine the results.

    Good luck!

    HTML

     <div id="wrap">
    <div class="contentWrap">

  <!-- Begin page content -->
  <div class="container">
    <div class="page-header">
      <h1>Sticky footer</h1>
    </div>
    <p>page content</p>
  </div>

  <div id="push"></div>
    </div><!-- end contentWrap -->
</div> <!-- end wrap -->

<div id="footer">
  <div class="container">
      <h3>sticky footer </h3>
  </div>
</div>

    CSS

    #wrap{
background: url(http://is.gd/0QPvoC) left bottom; /* define image and position */
}

.contentWrap{
background-color:#fff;  /* quick fix so background image is hidden behind main content */
}