1

I'm looking for resolution to my CSS problem. This is Drupal theme, so the content will have different height. I've got footer fixed on the bottom and structure as follow

<body>
  <div class="page-container">

    <div class="header">
    </div>

    <div class="content-container">

      <div class="content-insider">
       Different kind of content here
      </div>

    </div>
  </div>

  <div class="footer">
  </div>
</body>

I need both the height of content-container and content-insider to be at least height of the browser window and at the same time the height of content inside. It's the background that needs to be expanded all the way to the bottom. I've tried some solutions (also from stackoverflow) but they work only if content is shorter than browser height. If there is more content, and you scroll down, the content-insider cuts off before reaching bottom of the browser.

Community
  • 1
  • 1
Filip Witkowski
  • 795
  • 3
  • 14
  • 24

1 Answers1

0

This is the sticky-footer situation. You can google it or keep reading.

  1. set a min-height of 100% on .page-container;
  2. change its box-sizing property to border-box so that by adding some padding padding, its height remains equal to 100% vs 100% + padding. Then, with that done, add a padding bottom thats equal to the height of the .footer;
  3. pull the footer up by setting a negative margin-top equal to its height.

That's it. Here's a fiddle so you can see it in action: http://jsfiddle.net/joplomacedo/MqzGt/

João Paulo Macedo
  • 15,297
  • 4
  • 31
  • 41
  • It's not exactly what I was looking for. The footer is not a problem - I can make position fixed. What I wanted is to have the .page-container and .page-insider always height 100%, so when there is background file repeated, it reached the footer every time. – Filip Witkowski Jul 09 '12 at 02:03
  • I'm not sure I understand you're problem then. Should the footer be out of the browser window even when the content isn't enough to push it down? – João Paulo Macedo Jul 09 '12 at 02:14
  • Sorry. Maybe if you look on the actual project I'm working on, it will be better to understand. See [the website](http://tadeuszchabrowski.com/) I'm working on. I want the _wrapper_ divs to fill the page down to the bottom of it. All of them (wrapper-middle, wrapper-left, wrapper-right, wrapper-inside, and wrapper-inside2). Whenever the content on the page is longer than browser window height or not. – Filip Witkowski Jul 09 '12 at 03:10