我正在处理我网站上包含大量数据的页面，因此该页面非常长。该页面由主体的背景图像和带有背景图像的容器组成，两者都占据整个页面的长度(不是顶部或底部边距，也没有顶部或底部填充)。我遇到了背景图片的问题:在某些分辨率下它们没有延伸到页面底部。我编码的屏幕是 1680px 宽，目前两个背景图像一直延伸到底部。但是，当我在分辨率较小的屏幕(例如 1280 像素宽的屏幕)上查看页面时，背景图像不会一直延伸到底部。
我正在使用 XHTML 1.0 Strict。
这是相关的 HTML 代码:
<body class="ice01">
<div id="maincontent2">
<!-- content -->
</div>
</body>
这是相关的 CSS 代码:
.ice01 {
background-image: url('../images/iceBackground04.jpg') ;
margin: 0 100px;
font-family: book antiqua;
font-size: 19px;
color: #12124c;}
#maincontent {
width: 88%;
background-image: url(../Images/BlueParchment.jpg);
margin: 0px auto;
padding: 0px 32px 0px 32px;}
如果我调整窗口大小，也会出现此问题。另外，如果我取出背景图像并用颜色替换它们，这个问题就会消失。我已尝试使用反向速记 (background: #0000ff url('../images/iceBackground04.jpg') repeat 0 0;)，但这并不能解决问题。
我已经尝试对它们都使用 min-height: 100%; 并且它没有解决问题。我还通过 W3C 验证了该网页，并且全部检查完毕，所以我认为这不是由任何丢失/未关闭的标签引起的。
这是相关页面的 URL:http://icengale.com/icenDeities-Mainen.html
我正在使用“重置”css 文件，但删除它并不能解决问题，所以我认为这不是导致问题的原因。
非常感谢任何和所有的帮助，谢谢!
最佳答案
如果可行，请尝试使用以下 css。
.ice01 {
background:url(../images/iceBackground04.jpg) repeat-x 0 0;
margin: 0 100px;
font-family: book antiqua;
font-size: 19px;
color: #12124c;}
#maincontent {
width: 88%;
background:url(../images/BlueParchment.jpg) repeat-x 0 0;
margin: 0px auto;
padding: 0px 32px 0px 32px;}
关于html - 背景图片未延伸至页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17439819/