0

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.

3
  • I don't understand you. Content already fills remaining space. If you want to add image in content to scale depending on content height and width, use img {max-width: 100%; max-height: 100%;}
    – Morpheus
    Feb 8, 2013 at 12:57
  • But there is header yet.
    – Erik
    Feb 8, 2013 at 13:15
  • @Eric So place header inside content, create another div for items or whatever and add image or background to that items div.
    – Morpheus
    Feb 8, 2013 at 13:39

1 Answer 1

0

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 */
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.