2

Can anyone help me with position my content block? It looks good if there are a lot of content, but not when window higher than content block. Actualy I need that "content" block on my picture teked all free space (height) and thats why footer stick to the bottom.

enter image description here

I have next HTML markup:

<div>
    <header></header>
    <nav class="breadcrumbing"></nav>
    <section class="left_nav"></section>
    <section class="content"></section>
    <footer></footer>
</div>

With this CSS: 

html,body{width:100%;margin:0;padding:0;}
body{background-color:#629302}
body>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;}
body>div>header{height:50px;background-color:#9dc155}
body>div>nav.breadcrumbing{display:block;height:10px;margin:0;padding:0;}
body>div>section.left_nav{width:172px;margin:8px 20px;float:left;background-color:#cdef88}
body>div>section.content{width:168px;float:left;}
body>div>footer{padding:19px 19px 22px;background-color: #e58b04;clear:left;}

I allready tried answers from Is it possible to get a div's height to be 100% of an available area? and some same questions but with no luck. ALso my live HTML has backgroun-images, so I can't just put footer to the bottom with position:absolute.

There I post my HTML to preview: jsfiddle.

UPD: scaled live preview: enter image description here

Community
  • 1
  • 1
Arthur Halma
  • 3,943
  • 3
  • 23
  • 44

2 Answers2

1

You will have to set the html and body height property to 100%; then you can set the footer height to 100%; this will tell the main container elements the real meaning of 100% and it will work.

Your updated fiddle

Basically, these are the rules you have to add:

html, body {
    height: 100%;
}

footer {
    height: 100%;
}

Update

Ok, I might have misunderstood your requirements, here is a cleaner example:

Working example

Basically, what you additionally do in this example is having your wrapper element display:table with an height: 100%, then you make your footer display as table-row.

Important note: This solution uses display-table which is compatible only for IE8+. If supporting IE7 is an issue for you, then you have two solutions that I can think of out of my head:

  1. Either you use a fixed-width footer, push it below the content and then pull it back with a combination of negative margin and padding.

  2. Or you fallback to support of older browser by putting your footer in position using some javascript.

This the breakdown of the code:

HTML

<div class="wrapper">
    <header></header>
    <section class="main-content">
      {child elements of your main-content area}
    </section>
    <footer></footer>
</div>

CSS

html, body { 

  height: 100%;
  margin: 0;

}

.wrapper { 

  display: table;
  margin:  0 auto;
  height:  100%;

}

.main-content { 

  display: table-row;
  height: 100%;

}

footer { 

  display: table-row;

}
Sunyatasattva
  • 5,619
  • 3
  • 27
  • 37
1

Here's an updated fiddle

The crux of this is setting the body to be absolutely positioned to the viewport. From there, if you wanted to allow it to scroll as you normally would, then you would change the footer's position to fixed and the content div's CSS to this:

body>div>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;
position:absolute; top: 0; bottom: 0; overflow-y:auto;}

I've wrapped your content div in another to allow for the automatic margins to center your page, and then defined the footer's box sizing as border-box to account for the padding you're adding to it as well.

Josh Burgess
  • 9,327
  • 33
  • 46
  • The problem with this approach is that, should the `content` div *contents* eventually fill up the space, there will be the footer overlapping them. – Sunyatasattva Mar 08 '13 at 15:04
  • I think it is not a good idea (with position:fixed) on different layouts I have "content" blocks with different padding-bottom value. – Arthur Halma Mar 08 '13 at 15:04
  • You could set the bottom to whatever the height of the footer is, or pad the bottom of the content div as well. This is the only approach that won't rely on javascript that will work for the use case specified. – Josh Burgess Mar 08 '13 at 15:05