Div should fill height

Question

My page looks like this

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

The header has a fixed height.
The main div has a background-image.

I want the main div to be displayed to fill the whole screen, so that the image is displayed at the very bottom.

So I did:

div#main {
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(url);

    height:100%;
    min-height:100%;
}

This didn't work, how can I set a divs height to fill the whole screen?

Another solution would be to set the image to the body:

body {
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(url);
} 

Here I got the problem, that on scroll the image is not fixed at the bottom. It actually fixed to the height of the windows size.

background-attachment: fixed; isn't the solution either, because the background-image doesn't scroll at all.

---

Clarification

When the content is too large => There is a scroll bar, the background-image isn't fixed at the bottom anymore. That's the main problem. It's just the background-color of the body

---

@AndreaLigios

This is what I mean:

SOURCE

Check it out at http://themelandia.ilijatovilo.ch
Resize the window until the content is larger, and then scroll down.
Hopefully you'll see what I mean then.

Answer 1

Updated (r5)

I use another div to contains the background, set its position to fixed and z-index to -1;

#bg-trick {
    background: url(http://images1.fanpop.com/images/image_uploads/Naruto-Uzumaki-uzumaki-naruto-964976_692_659.jpg) bottom center no-repeat;
    position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
}

The demo is updated here http://jsbin.com/idubom/5/edit

Answer 2

using the body technique but on the div styling... add the following to your style...

#main {
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(url); 
    background-attachment: fixed;
}

Answer 3

You first need to set the height of the parent element to 100% to make the child element be able to stretch up to 100%

Set the width and height of html, body and #wrapper to 100% like this:

html, body, #wrapper
{
  height:100%;
  width:100%;
}

Now apply background image in #wrapper(#wrapper is recommended rather than #main but if some part of the image being cut from the top bothers you then use #main)

Here is a sample in jsfiddle.

Answer 4

Please check the updated [DEMO] 1 . This is what you are looking for.

DESCRIPTION :

    div#wrapper{
    height: 100%;
    min-height: 100%;
    width: 100%;
    background-color: red;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(http://s1.ibtimes.com/sites/www.ibtimes.com/files/styles/article_large/public/2012/08/20/298141-apple-aapl-stock-price-becomes-most-valuable-in-history-but-there-s-st.jpg);
    position:absolute;
    bottom:0;
}
div#header {
    height:80px;
    background-color:green;
}

div#main {
    padding: 60px 0px;
    min-height: 200px;
    bottom: 0;
}
div#contentWrap,div#headerWrap {
    width:960px;
    margin:0 auto;
    text-align:center;
}

** The key point is to add position absolute/Fixed on wrapper.

To display a image in full width you need to say body as a 100% of height. Rest seems fine to me in your code.

Here is also updated DEMO May Be this is what you are looking for.

Answer 5

EDIT : final solution based on your site:

add

overflow: auto;
position: fixed;

to your div#wrapper rule.

---

EDIT:

New solution: http://jsfiddle.net/SxPyW/2/

added top: 0; , padding-top: 100px; and z-index: 1;

---

Do you mean this ?

Demo: http://jsfiddle.net/SxPyW/

With absolute positioning, but with image scrolling up when scrolling the page (not the fixed behavior) ?

#main {  
   /* ... your stuff... */
    border: 2px solid blue;
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 0;
}

(borders inserted to show boundaries, they overlap each other here, if you need borders adjust the top attribute accordingly)

Answer 6

you've already given height 100% to your div, additionaly add an innerHTML to your div because empty divs create such issues.

document.getElementById('my_empty_div').innerHTML = '&nbsp';

Hope that helps.