【发布时间】：2011-09-09 00:57:41
【问题描述】：
我有以下 XHTML 页面，后面跟着我想要的 CSS，并希望 main-text div 一直到页面底部，以便 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);
}
【问题讨论】：
-
当涉及到不同的分辨率（主要是非常大或非常小的极端情况）时，像这样的静态页面会很混乱。您可能想问自己是否从这样的编码中获得了什么。