CSS：Stretch Div到其父级高度的100％，带边距/填充 [英] CSS: Stretch Div to 100% of its parent's height with margin/padding

问题描述

目前我在这个网页上工作（请参阅图1）

Currently I'm working on this page (look at Figure1)

我需要在文章div上创建阴影，由于浏览器兼容性，我不能使用box-shadow属性。

因此我们将背景分为3个样子，

I need to make shadow on the article div and I cannot use box-shadow attribute due to browser compatibility.
So we divide the background into 3 pieces like this,

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

这是很好，直到我们改变背景图像到PNG JPEG包含浅蓝色背景颜色。

在我们改变图像文件之前，我可以使用z-index属性。 （将中间部分的高度设置为100％并将top / bot部分放在其上）
但是，因为我用PNG更改它似乎更加奇怪，因为PNG的不透明度。

It was nice until we change background image to PNG from JPEG which contains light-blue background-color already.
Before we change image files I could do it with z-index property. (set middle part's height to 100% and put top/bot parts on it) However, since I change it with PNG It seems wierd because of opacity of PNG.

底线是 - 我需要这样做：

Bottom line is- I need to do something like this:

但是当我将中间部分的高度设置为100％ />
这是我得到的（fiddle： http://jsfiddle.net/EaBxP/ ）：

But when I set middle part's height to 100% with margin-top/bottom attributes,
This is what I've got(fiddle: http://jsfiddle.net/EaBxP/) :

它应该与 IE6 配合使用，我不能只使用JPEG，因为设计师想做评论和评论框的阴影文章。

提前感谢。

It should work with IE6 and I cannot just use JPEG since designer wants to do stick article with comments and shade over comments box.
Thanks in advance.

EDIT ：article div的高度是隐含的，所以我不能设置中间部分的高度。

EDIT: article div's height is implicit so I cannot just set middle part's height.

推荐答案

使黄色div相对于容器绝对定位。通过设置顶部和底部而不指定高度，div将获得容器的高度。

Make the yellow div absolutely positioned, relative to the container. By setting both the top and bottom without specifying a height, the div will get the height of the container.

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

这篇关于CSS：Stretch Div到其父级高度的100％，带边距/填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！