Home/ Questions/Q 6325799
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T16:57:44+00:00

Lord, I’m not even sure how to phrase the title for this one. I’ve

  • 0

Lord, I’m not even sure how to phrase the title for this one.

I’ve included an image of what I’m trying to accomplish below.
http://www.wideeyedcommunications.com/images/positioning-sample.png

I have a footer set to the bottom of the screen. A containing div is overlapping that footer. I need that containing div’s height to be a set distance from the bottom of the screen irrespective of the resolution of the screen or the quantity of the content in the containing div.

So, the green footer (squiggle) is always locked to the bottom of the screen, and the bottom of the brown div is within, let’s say 20 pixels of the bottom of the screen no matter how much or little content is within that div.

So if I have 1 line of text and no scrollbars, then it’s height is viewport - 20px. And if I have 1000 lines of text and scrollbars the height is still viewport - 20 px.

I’d guess that jquery could do it with something like:

$(".container").height(function(){
  $(window).height-20;
});

But is it possible to accomplish this without using javascript?

Edit: Here’s some of the code.

<body>
  <div style="position: relative; padding-bottom: 20px;">
    <div id="grass">&nbsp;</div>
      <div id="container">
        <div id="content">
        Navbar, content, etc goes here
        </div>
      </div>
  </div>
</body>

And the existing css

#grass {
  background: url("../images/bg_grass.jpg") repeat-x scroll center bottom;
  bottom: 0;
  height: 420px;
  position: absolute;
  width: 100%;
  z-index: -10;
}
#container {
  margin: 35px auto 0;
  position: relative;
  width: 960px;
}
#content {
  background: none repeat scroll 0 0 #FFF8ED;
  border: 2px solid #764C29;
  border-radius: 13px 13px 13px 13px;
  margin-bottom: 20px;
  overflow: hidden;
}

I’ve just uploaded a demo site to http://jsfiddle.net/Fireflight/HQvay/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’ll have to add a margin-bottom to your container, and then set it’s height with jQuery:

    CSS:

    .container { margin: 20px auto }

    Javascript:

    $(window).resize(function(){
      $('.container').css('height', $(window).height() - 40);
}).resize();

    Note: If your container has padding and/or borders, you’ll have to include those in your calculations.

    • 0