CSS: How to get the "main text" element to stretch it's properties to the bottom of the page_问答_开发者

I have the following XHTML page followed by my intended CSS and would like the main-text div to go all the way to the bottom of the page so that footer and footer2 appear at the bottom of the page and the main-text background carries through all the way to the bottom.

(N.B. The top margin and padding of "main-text" was intended as is)

Everything has been included:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>


<head>
    <link rel="stylesheet" type="text/css" href="core-sheet.css">
    <title>MySite | Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>


<body>

    <div id="top-image"></div>

    <div id="content">

        <div id="left-nav-links">

            <ul>
                <li><a href="index.html" >Home</a></li> 
                <li><a href="thePages/GalerieImages/gallery.html">Gallery</a></li>
                <li><a href="thePages/contact.html">Feedback</a>
                </ul></div>

        <div id="main-text">

            <!-- 'Welcome' text, etc. -->

            <h1>Welcome to MySite!</h1>

            <h2>Introduction</h2>

            <p>Text Goes Here</p>


            <p class="footer">
                <a href="index.html">MySite</a> | <a href="thePages/GalerieImages/gallery.html">Gallery</a> | <a href="thePages/contact.html">Feedback</a></p>
            <p class="footer2">
                <a href="thePages/sitemap.html">Site Map</a> | <a href="thePages/imagemap.html">Image Map</a> | <a href="thePages/sources.html">Source Log</a></p>

        </div>
    </div>
</body>
</html>

And Here's the main style sheet (NB: filename is specified above as "core-sheet.css"):

/*Main Style Sheet*/

/* --------------- overview of page --------------- */

body {
    margin:             0;
    background-color:   #AAAAAA;
    color:              #000000;
    font-family:        Arial, Tahoma, Helvetica, sans-serif;
    font-size:          1.1em;
    letter-spacing:     1px;


}


/* --------------- define body elements and style of page --------------- */


/* --------------- styles for all headings --------------- */


h1, h2 {
    margin:             0;
    padding:            0;
    font-weight:        normal;
    color:              #000000;
}


/* --------------- styles for individual headings --------------- */

h1 {
    font-size:          2em;
}


h2 {
    font-size:          1.4em;
}


/* --------------- paragraph style --------------- */

p   {
    font-size:          0.8em;
    text-align:         left;
    line-height:        1.2em;
    color:              #000000;
    padding-right:      200px;
    line-height:        120%;
}


/* --------------- page footers --------------- */   

p.footer   {
    font-size:          0.7em;
    text-align:    开发者_如何学Go     center;
    font-weight:        bold;
    color:              #000000;
}

p.footer2   {
    font-size:          0.6em;
    text-align:         center;
    font-weight:        bold;
    color:              #000000;
}


/* --------------- sidebar link positioning properties --------------- */


#left-nav-links {
    position:           absolute;
    line-height:        140%;
}


/* --------------- main text area of page --------------- */

#main-text {
    background-color:   #ffffff;
    height:             100%;
    border-left:        1px #000000 solid;
    padding-top:        50px;
    margin-left:        198px;
    padding-left:       50px;
}


/* --------------- lay out links neatly --------------- */

#top-image {
    height:              180px;
    background-position: center top;
    background-image:    url(../images/MYZE.gif);

}

Here is the css needed,

/*Main Style Sheet*/

/* --------------- overview of page --------------- */

* {
  -webkit-box-sixing: border-box;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

html, body {
  height: 100%
}

body {
    margin:             0;
    background-color:   #AAAAAA;
    color:              #000000;
    font-family:        Arial, Tahoma, Helvetica, sans-serif;
    font-size:          1.1em;
    letter-spacing:     1px;
    display: table;
    width: 100%;

}


/* --------------- define body elements and style of page --------------- */


/* --------------- styles for all headings --------------- */


h1, h2 {
    margin:             0;
    padding:            0;
    font-weight:        normal;
    color:              #000000;
}


/* --------------- styles for individual headings --------------- */

h1 {
    font-size:          2em;
}


h2 {
    font-size:          1.4em;
}


/* --------------- paragraph style --------------- */

p   {
    font-size:          0.8em;
    text-align:         left;
    line-height:        1.2em;
    color:              #000000;
    padding-right:      200px;
    line-height:        120%;
}


/* --------------- page footers --------------- */   

p.footer   {
    font-size:          0.7em;
    text-align:         center;
    font-weight:        bold;
    color:              #000000;
}

p.footer2   {
    font-size:          0.6em;
    text-align:         center;
    font-weight:        bold;
    color:              #000000;
}


/* --------------- sidebar link positioning properties --------------- */


#left-nav-links {
    position:           absolute;
    line-height:        140%;
}


/* --------------- main text area of page --------------- */

#main-text {
    background-color:   #ffffff;
    height:             100%;
    border-left:        1px #000000 solid;
    padding-top:        50px;
    margin-left:        198px;
    padding-left:       50px;
}


/* --------------- lay out links neatly --------------- */

#top-image {
    display: table-row;
    height:              180px;
    background-position: center top;
    background-image:    url(../images/MYZE.gif);

}

#content {
  height: 100%
}

http://codepen.io/raunay/pen/uFbHK

One of the solutions here is to use table.

To tackle this, set the remaining height is to display:table for the container and display: table-row for the child. This way, if the container was set to be 100%, and you specify the display: table-row for the 1st child element to be fixed height and 2nd child element to be height:100%, the 2nd child element will have the remaining height needed to fill in the entire container.