HTML/CSS Help request

So, a friend of mine urged me to try 4Chan for help with some HTML/CSS problems I am having some trouble with.

I am trying to create a simple homepage for my exams with some HTML5 standards mixed in for fun. The idea is to have a Header and a Footer that has 100% width and are fixed at the top and bottom of the screen respectively, with a 640px wide content container centered between the two. This content container is supposed to always fit between them height-wise, so that no matter how big your screen or how you resize your browser window, it fits between the Header and Footer. This is where I am having trouble, I cannot get it to do that. I figured I could do it by giving the content DIV a height:100%; or min-height:100%; but that hasn't worked out.

I tried googling some suggestions and there certainly are other people with similar designs in mind, I am just having problems implementing them into my design without breaking something else. So I figured I'd ask someone to take a look at my code specifically.

First time posting on 4chan so I don't know if it allows me to post with formatting or this amount of characters... lets see.

Here is the Structure:
  
    <div id="wrapper">
   
        <header class="top">
                       
            <nav class="main">
                &nbsp
            </nav>
               
        </header>
       
        <div id="content_wrapper">
           
            <div id="content_inner_wrapper">
               
                <div id="slideshow">
                    &nbsp;
                </div>
             

        <article class="content">
                    <p>Test test test test</p>
                    <p>Test test test test</p>
                  </article>
   
            </div>

        </div>
       
    </div>

    <div id="footer_wrapper">
 
        <footer class="bottom">
            &nbsp;
        </footer>

    </div>

And here is the CSS:

@charset "utf-8";
/* CSS Document */

body, html {
    height: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    overflow-y:scroll;
    background:rgba(20,0,150,1);
    margin:0px;
    padding:0px;
}

#wrapper {
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0px 0px -75px 0px;
}

#footer_wrapper {
    width:100%;
    height:75px;
    background:rgba(50,50,50,1);
}

#content_wrapper {
    width: 100%;
    padding: 0px 0px 75px 0px;
}

#footer_wrapper, #content_wrapper {
    min-width: 640px;
}

#footer_inner_wrapper, #content_inner_wrapper {
    width: 640px;
    margin: 0px auto;
}

#slideshow {
    width:640px;
    height:200px;
    background:rgba(0,200,50,1);
}

.top {
    width:100%;
    height:75px;
    background:rgba(50,50,50,1);
}

.content {
    width:640px;
    min-height:418px;
    background:rgba(0,0,200,1);
}

.main {
    width:640px;
    height:75px;
    background:rgba(200,25,200,1);
    margin:0 auto;
}

.bottom {
    height:75px;
    width:640px;
    background:rgba(200,25,200,1);
    margin:0 auto;
}

Any tips? Any help would be greatly appreciated :)

Nope it didn't...

Structure:

<!-- Her starter den overordnede ramme -->         
    <div id="wrapper">
   
        <!-- Her starter Header + Navigation -->
        <header class="top">
                       
            <nav class="main">
                &nbsp
            </nav>
               
        </header>
       
        <!-- Her er indholdets ramme -->
        <div id="content_wrapper">
           
            <!-- Denne ramme centrere indholdet -->
            <div id="content_inner_wrapper">
               
                <!-- Her starter slide show -->
                <div id="slideshow">
                    &nbsp;
                </div>
             
                  <!-- Her starter indhold -->
                <article class="content">
                    <p>Test test test test</p>
                    <p>Test test test test</p>
                  </article>
   
            </div>

        </div>
        <!-- Her slutter indholdets ramme -->
       
    </div>

    <!-- Her starter footerens overordnede ramme -->
    <div id="footer_wrapper">
   
        <!-- Denne ramme centrere indholdet-->
        <footer class="bottom">
            &nbsp;
        </footer>

    </div>
    <!-- Her slutter footerens overordnede ramme -->

CSS:

@charset "utf-8";
/* CSS Document */

body, html {
    height: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    overflow-y:scroll;
    background:rgba(20,0,150,1);
    margin:0px;
    padding:0px;
}

#wrapper {
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0px 0px -75px 0px;
}

#footer_wrapper {
    width:100%;
    height:75px;
    background:rgba(50,50,50,1);
}

#content_wrapper {
    width: 100%;
    padding: 0px 0px 75px 0px;
}

#footer_wrapper, #content_wrapper {
    min-width: 640px;
}

#footer_inner_wrapper, #content_inner_wrapper {
    width: 640px;
    margin: 0px auto;
}

#slideshow {
    width:640px;
    height:200px;
    background:rgba(0,200,50,1);
}

.top {
    width:100%;
    height:75px;
    background:rgba(50,50,50,1);
}

.content {
    width:640px;
    min-height:418px;
    background:rgba(0,0,200,1);
}

.main {
    width:640px;
    height:75px;
    background:rgba(200,25,200,1);
    margin:0 auto;
}

.bottom {
    height:75px;
    width:640px;
    background:rgba(200,25,200,1);
    margin:0 auto;
}