0

我正在处理我网站上包含大量数据的页面，因此该页面非常长。该页面由主体的背景图像和带有背景图像的容器组成，两者都在页面的整个长度上运行（不是顶部或底部边距，也没有顶部或底部填充）。我遇到了背景图像的问题：它们在某些分辨率下没有延伸到页面底部。我编码的屏幕是 1680 像素宽，目前两个背景图像都一直延伸到底部。但是，当我在具有较小分辨率的屏幕上（例如 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 验证了网页，并且所有内容都已检查，所以我认为它不是由任何丢失/未关闭的标签引起的。

这是相关页面的网址：http: //icengale.com/icenDeities-Mainen.html

我正在使用“重置”css 文件，但删除它并不能解决问题，所以我认为这不会导致问题。

非常感谢任何和所有帮助，谢谢！

4

1 回答 1

0

如果可行，请尝试使用以下 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;}
于 2013-07-03T04:56:27.770 回答