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％

回答

相关问题