我有下面的XHTML页面，后面跟着我想要的CSS，我希望main-textdiv一直到页面底部，这样footer和footer2就会出现在页面底部，main-text背景会一直到底部。
（注意："正文"的上边距和填充按原样）
一切都包括在内：
<!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>
这是主样式表（注意：文件名在上面指定为"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: 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);
}
这是所需的css，
/*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
这里的解决方案之一是使用表。
为了解决这个问题，设置剩余高度是为容器显示：table，为子级显示：table行。这样，如果容器设置为100%，并且将第一个子元素的display:table行指定为固定高度，将第二个子元素指定为高度：100%，则第二个子图元将具有填充整个容器所需的剩余高度。