CSS：彈力檔位，其父與保證金/填充高度的100％

我需要做的文章DIV陰影由於瀏覽器兼容性，我無法使用box-shadow屬性。
所以我們把背景爲3個這樣的，

<div class="article"> 
    <div class="background-top"></div> 
    <div class="background-mid"></div> 
    <div class="background-bot"></div> 
    <div class="contents"> 
     <!-- contents --> 
    </div> 
</div>

很高興，直到我們改變從JPEG背景圖像PNG包含淡藍色背景色了。
在我們改變圖像文件之前，我可以用z-index屬性來完成。（將中間部分的高度設置爲100％，並將頂部/機器人部分設置在其上）但是，由於我使用PNG更改了它，因爲PNG的不透明度而顯得更爲奇怪。

底線是 - 我需要做這樣的事情：

但是，當我設置中間部分的高度，以100％的保證金，頂部/底部的屬性，
這是什麼我有（小提琴：http://jsfiddle.net/EaBxP/）：

它應該與IE6一起工作，我不能只使用JPEG，因爲設計師想在評論框中添加評論和陰影。
在此先感謝。

編輯：文章div的高度是隱含的，所以我不能只設置中間部分的高度。

來源

2012-01-03 Sang

沒有其他人提出你的問題...真的很有條理，很清楚你在問什麼。 – jskidd3 2014-04-21 20:53:37

使黃色div相對於容器絕對定位。通過設置頂部和底部而不指定高度，div將獲得容器的高度。

div.background-mid { 
    position: absolute; 
    top: 20px; 
    bottom: 20px; 
    left: 0px; 
    right: 0px; 
    background-color: yellow; 
}

來源

2012-01-03 08:00:00 Sjoerd

感謝您的快速回復:)但它不適用於IE6 + IE7 +/chrome/FF。我錯過了什麼？ – Sang 2012-01-03 08:09:03

這是IE6中的一個錯誤。嘗試在互聯網上搜索解決方法。 – Sjoerd 2012-01-03 08:17:17

@Sjoerd我正面臨類似的問題。我需要中等容器從父母到底部開始。只要我把它設置爲絕對0，它就會粘在頁面的頂部。 – Shimmy 2013-09-16 02:38:38

CSS：彈力檔位，其父與保證金/填充高度的100％

回答

相關問題