背景图像未出现在特定页面上答案

【问题标题】：Background image doesn't appear on a specific page背景图像未出现在特定页面上
【发布时间】：2012-03-29 14:26:30
【问题描述】：

在这个网站上：http://walkman.pk/aserdus2/tagok.php
我的左右两边有两个背景图片，没有出现，我不知道为什么？
该网站的每个其他页面都可以正常工作。似乎某些<div> 元素没有正确关闭。当我用 chrome inspector 看时，我看到 content div 很薄，但我不明白这是为什么。
我应该怎么做才能显示图像？

【问题讨论】：

确保 div 有宽度/高度。你能贴一张它应该是什么样子的截图和一些 html/css。

标签： css layout html stylesheet

【解决方案1】：

#content 中只有浮动元素，因此它的高度为零。您可以通过将overflow 设置为visible 以外的其他值来解决此问题：

#content {
    overflow: hidden;
}

瞧：

【讨论】：

【解决方案2】：

这是因为 block 类的两个元素都是浮动的，因此 id content 的元素没有高度（具有背景图像）。所以你需要给content元素（height: 250px）赋予高度应该可以解决问题。

【讨论】：

这会弄乱其他页面，并且页脚将在文本内！

【解决方案3】：

将此添加到您的#content {}：

height: 600px;（或图片有多高）

我用 Inspect Element 试了一下，图片出现了。

祝你好运！

【讨论】：

同样的问题；在长页面中，页脚将在文本内
当我查看您提供的页面时，它现在可以工作了。我看到overflow: hidden 修复了它。

【解决方案4】：

试试

<div id="content">

...

<div style="clear:both"></div>
<!-- CONTENT END -->
</div>

或
http://www.webtoolkit.info/css-clearfix.html

<div id="content" class="clearfix">

...  

<!-- CONTENT END -->
</div>

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

【讨论】：