HTML CSS：为什么我的页脚不可见？

我正在尝试使用导航栏进行布局，该导航栏跨越除页脚之外的所有页面。我也有顶部和右侧的广告空间。

我试图遵循https://stackoverflow.com/a/4401359/3255963使导航栏下降，但是导航栏并没有一直到该页脚，并且该页脚丢失了。

如何在底部显示页脚并获得导航栏以完成页脚？

http://jsfiddle.net/pfYt5/

HTML页面标题

<div id="wrap">

    <div id="navbar">
        <a id="navbarTitle" href="./index.html">Name of website</a><br>
    </div>

    <div id="main">

        <div id="topAdvertising"> 
            [placeholder]
        </div>

        <div id="main_core">
            <div id="main_core_left">       
                <div id="warning">
                This is a work in progress
                </div>

                <div id= "app_title">Page Title</div>

                <div id="app_input">
                    afjdlajfdaslkfjsalkfjasl;fjas;ldjfals;djflasdjfasldjflsajdfljlksadf: <br>                   
                    <li>dfjsalfjdlskjfdljfl</li>
                    <li>dsfjlakfjdljsflkjlj</li>
                    <li>skdfjlsjfldjfldjflf</li>
                    <li>dfjdlksjfldjflkjlfkdj</li>
                    jsljaflkdsjfldskjfldksjflkdjflkdjfldkjfdkljfld.<br>
                    fdljasflkjdaslfkjdslakfjds <br>
                    djfklajfldasjflds<br>
                    dfaskljfdalsjfdsla<br>
                    afdjklajfdlkjafld<br>
                    afdlkjlsdfjlakdfjlas<br>
                    afsdjljsfdlkjadflkjasfldkjaflkdjsafldaffasjdklfja<br>
                </div>

                <div id="text">
                <a id="linkid" href="http://randomweblinkjflksjflkdsjflkdjfldkjfldkjfldkfjdlfjdljfdlfjdklfj">Link</a> <br>
                <blockquote cite="linkjflskjfkldsjaflkdsjaflkdjsaflkjdsaflkjdslfkjdslakfjdslafjdslkafjdlskjfd"></blockquote>A lot of text. A lot of text.A lot of text.A lot of text. A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.</blockquote>              
                </div>

            </div>

            <div id="main_core_right_advertising">
                    [placeholder]
            </div>
        </div>


    </div>

</div>

<div id="footer">
    ©2014 Copyright
</div>

</html> 

的CSS

/* This is a comment, by the way */

body, html {
    color: black;
    background-color: white;
    margin: 0;
    padding: 0;
}

wrap {
    height: 100%;
    position: relative;
}

#navbar {
    position: absolute;
    height: 100%;
    width: 17%;
    top: 0px;
    left: 0px;
    bottom: 0px;
    color: white;
    background-color: black;
    padding: 12px;
}

    #navbarTitle {
        font-size: 2em;
        color: white;
        font-style: bold;
        text-align: left;
    }

#main {
    margin: 0px 0px 0px 20%;
    position: relative;
    height: 100%
}

    #topAdvertising {
        width: 80%;
        text-align: center;
        margin: 30px;
    }

    #main_core {
        position: absolute;
        height: 100%;
    }

        #main_core_left {
        float: left;
        width: 80%;
        }

            #warning {
                font-size: 14px;
                font-family: garamond, arial, helvetica, sans-serif;
                text-align: center;
                font-style: italic;
                margin: auto;
                margin-bottom: 20px;
                width: 70%;
                padding: 10px;
                background-color: yellow;
            }

            #app_title {
                font-size: 1.5em;
                margin: 0;
                margin-bottom: 7px;
                padding: 4px;
                text-align: center;
                letter-spacing: 0.05em;
            }

            #app_results_title {
                margin: 0;
                margin-bottom: 7px;
                font-weight: bold;
                text-align: center;
            }

            #app_input, #app_output {
                font-size: 16px;
                margin: auto;
                width: 70%;
                padding: 12px;
            }

            li {
                margin-left: 15px;
            }

            form {
                padding-top: 12px;
                text-align: center;
            }

            #resultsTable {
            width: 100%;
            border-collapse: collapse;
            }

            #resultsTable td, #resultsTable th {
            font-size:1em;
            border: 1px solid black;
            padding: 3px 7px 2px 7px;
            }

            #resultsTable th {
            font-size:1.1em;
            text-align:left;
            padding-top:5px;
            padding-bottom:4px;
            background-color:black;
            color:#ffffff;
            }

            #resultsTable tr.alt td 
            {
            color:#000000;
            background-color:gray;
            }

            #startOver {
                margin: 20px;
                font-size: 16px;
                text-align: center;
            }

            #authority {
                margin: 20px;
                padding: 10px;
                font-size: 12px;
                text-align: justify;            
            }

        #main_core_right_advertising {
            float: right;
            width: 17%;
            background-color: aqua;
            }

    #footer {
        text-align: center;
        margin: 20px;
        color: red;
    }

    a:link {
    text-decoration: none;
    }