Home/ Questions/Q 5993387
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T23:40:05+00:00

I have what appears to be a fairly common problem. I have a portion

  • 0

I have what appears to be a fairly common problem. I have a portion of a website that needs to be full-height if the content is less than able to fill the screen. The design is fixed-width…so height is my only concern. I have tried height:100%, in CSS and the min-height for Mozilla. When I do this, it works, except my column ends up TOO tall. It appears that my height is 100% plus the height of my header plus the height of my footer. The closest I got was adding the following to my #main div:

position: absolute;
top: 125px;
right: 0;
left: 0;
bottom: 0;

…but this ended up making the height great for short content, but when I was on a page with long content, the content no longer pushed my footer down below it. I also tried simply applying the background image to the overall container (which is taking full height), but that ended up putting my image over everything…maybe there is a way to do that but force it to a lower layer? Anyway, there is so much CSS and HTML involved in the page that a link is probably much more useful…so when I come up with a solution (hopefully with your help) I will post the original and modified parts here…the main HTML and CSS should remain unchanged for years. http://www.broadwaybaptist.org/beliefs/

P.S. I know people mention that JavaScript usually has to be used to solve this. I am okay with that…but do not know at all how to approach that. I also would prefer to do it with just CSS…but i will take what i can get. THANKS!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You, sir, are talking about a sticky footer. It sits at the bottom of the screen when the page isn’t long enough to push it down, but it slides along with the content when the content is long enough.

    To implement it, your site needs to have this sort of construction:

    <div id="wrapper">
  <header>
    ...
  </header>

  <div id="content">
    ...
  </div>
</div>

<footer>
  ...
</footer>

    Basically, wrap everything except the footer in one big <div> tag.

    There is even a full (well, kind of) tutorial on how to make your site work with it. Read it here: http://www.cssstickyfooter.com/using-sticky-footer-code.html

    • 0