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的側重複的圖像，但是長期出現這種情況是，使用該元素在右側位置，背景圖片，而不是爲它創建一個額外的元素。