Combination of header - main_wrapper makes page scrollabe for header-height

I'm making a webpage with a fixed footer. If there is a lot of content, there must be a scroll bar. If there is only one line of input in the content-part, there is no need to scroll. The way the page is made now, gives me a scroll bar all the time! It scrolls just as far so that the header disappears from the screen. --> My header is 150px high and I can scroll exactly 150px. But I don't want this. What is wrong with my html or CSS?

This is the html:

<body>
<div id="header">
    <h1>The <span>ultimate</span><br />DVD collection</h1>
</div>
<div id="main_wrapper">
    <div id="main">
        <div id="choose">#abcdefghijklmnopqrstuvwxyz</div>
        <div id="content">Main content comes here.</div>
    </div>
</div>
<div id="footer">
    <p>My Name <span>admin log-in</span>
    </p>
</div>

Here's my CSS:

html, body {
    height: 100%;
    margin: 0 auto;
}
body {
    font-family: Helvetica, Arial, sans-serif;
    color: #666;
    font-size: 12px;
    line-height: 1.5em;
    /*position: relative;*/
}
#header {
    height: 150px;
    background: linear-gradient(left, #2a2620, #a35e47);
    border-top: 10px solid #f6e6c5;
    border-bottom: 10px solid #f6e6c5;
    background-color: #a35e47;
}
h1 {
    width: 960px;
    margin: 35px auto 0;
    font-family:'Luckiest Guy', cursive;
    font-size: 3.5em;
    line-height: 1em;
    text-transform: uppercase;
    font-weight: 400;
    color: #a35e47;
    text-shadow: 0px 0px 2px #f6e6c5, 4px 4px 8px #000000;
}
h1 span {
    font-family:'Aclonica', Verdana, sans-serif;
    font-size: 1.75em;
}
#main_wrapper {
    height: 100%;
    min-height: 100%;
    background-image: url('http://4.bp.blogspot.com/-jPxP0Hgum7o/T0OiL_IupqI/AAAAAAAAAMs/Xu5zNtqULoE/s1600/IMG_0665+Hollywood+star.jpg');
    background-repeat: no-repeat;
    background-position: 50% 60%;
    background-color: #5a646d;
}
#main {
    width: 960px;
    height: 100%;
    margin: 0 auto;
    background-color: #fff;
    opacity: .75;
    /*overflow: auto;*/
}
#choose {
    margin-left: 20px;
    font-family: georgia, serif;
    font-style: italic;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.5em;
    line-height: 2em;
    letter-spacing: 20px;
    overflow: hidden;
}
#content {
    margin-left: 20px;
    margin-right: 20px;
}
#footer {
    height: 40px;
    width: 100%;
    border-top: 10px solid #f6e6c5;
    background: linear-gradient(left, #2a2620, #a35e47);
    position: fixed;
    left: 0;
    bottom: 0;
}

You can also see my code in this jsFiddle.

What am I doing wrong? (look at the scroll bar in the picture) Thanks in advance!

Solution

I worked around it using this explanation: http://dorayme.netweaver.com.au/ciaran.html

My wrapper now has a position:absolute with top: and bottom: equal to the height of header and footer (+ height of borders)

#main_wrapper{
position: absolute;
top: 170px; /* header + bordertop + borderbottom */
bottom: 50px; /* footer + bordertop */
left: 0;
right: 0;
background-image: url('path/to/img.jpg');
    background-repeat: no-repeat;
background-position: 50% 40%;
background-color: #5a646d;
}

Thx to Johan Sundén for pushing me into the right direction!!