CSS形象设计问题

Question

这是我工作的测试网站： http://test.pafo.net/

正如你所看到的，它减少了一半的中间线，我试图弄清楚为什么会做到这一点。 身体backgroundcolor只是为了测试。

布局思路是

​​

另一件事是Firefox浏览器。如果我有一个空的div（如上面的中间div），那么我需要在Firefox中添加一个空格来显示它。如果我什么都没有，那么Firefox就不会显示它。

Answer 1

您可以通过将重复图像在site_page CSS类解决这个问题，因为这有您需要的高度：

.site_page { 
    background:url("../images/bg/bg_main_middle.png") repeat-y scroll 788px 0 #FFFFFF; 
} 

然后，您可以摆脱site_middle股利。

Answer 2

.site_middle { 
    height:100%; 
} 

百分之百的是什么？

百分比高度（非定位元素）相对于父元素site_page，即height: auto。所以，家长的高度是其子女的总高度，这取决于其自身的高度，这取决于孩子的高度，这是依赖于父高度...

CSS打破了这种僵局的saying这一比例相对于auto的高度被忽略，即。他们也是auto。这就是为什么你得到一个元素的高度只有你放进它里面的大小（当你没有放入任何东西时它的高度为零）。

如果你想沿着site-left div的侧重复的图像，但是长期出现这种情况是，使用该元素在右侧位置，背景图片，而不是为它创建一个额外的元素。