Html 垂直扩展内容框

我总是很难找到制作可扩展内容框的最佳方法。我曾经使用表格，将方框分成几个部分（顶部、底部、左侧和右侧，然后是表格单元格中的每个角落，中间有一个可扩展的单元格作为内容），这在所有浏览器上都是完美的，但它通常不受欢迎

今天，我有一个图像，我只需要垂直扩展。但是，它有一个阴影，顶部200像素左右有一个渐变。这里有一个指向我正在处理的图像的链接

随着内容的增长，内容需要流动，div需要垂直扩展。我看过一些方法，但不是没有成功，就是在某些浏览器中不起作用。主要问题是阴影和顶部渐变。当我绝对定位外部边缘时，这些阻止了我使用基础背景，然后绝对定位内部的一些div，因为背景破坏了阴影

---

有什么建议吗？当然，如果你熟悉css，那就相当简单了。我会把图像分成三个水平条带。一个用于顶部，包括圆角，一个用于底部，包括角和阴影，一个非常薄的条带用于中间

然后使用如下标记：

<div style='background-image: url("middle.png"); width: 400px;'>
    <img src='top.png'>
    Expanding content in the middle
    ...
    Can be as big as you like
    <img src='bottom.png'>
</div>

扩大中间内容
...
你喜欢多大就多大

我会在CSS3中添加一个线性渐变

---

对于周围带有阴影的圆形框，我选择100%CSS3还是两张背景图像和一个额外的div取决于我客户的要求。

可能是这样的，您可以对这种类型的图像和渐变执行此操作

编辑：添加CSS代码

.content{
    background: url(http://i.imgur.com/5hN1S.png) repeat-y top left;
    width:647px;
    min-height:300px;
    position:relative;
    margin:50px;
}
.y-repeat{
    position:absolute;
    left:2px;
    right:7px;
    top:0;
    bottom:0;
    background: url(http://i.imgur.com/bJmR4.png) repeat-x top left;
}
.top, .bottom{
    background: url(http://img16.imageshack.us/img16/3301/brandinfobox.png) no-repeat 0 0;
    height:20px;
    width:100%;
    position:absolute;
    left:0;
}
.top{
  top:-20px;
}
.bottom{
  background-position:left bottom;
  bottom:-20px;
}

---

如果该框可以有最小高度，则以下是一些示例。如何操作：

<div id="box-top"> // CSS bg image = 600*8px with rounded corners 
<div id="box-middle"> // CSS bg image = 5*80px vertical tiny gradient line ; min-height!  
<div id="box-bottom"> // CSS bg image = 600*8px with rounded corners

---

另一个技巧是简单地使用CSS3，您将获得IE渐变的支持，但不支持阴影和角（边界）半径

---

我考虑过这一点，但这意味着内容无法到达盒子的顶部和底部。我需要的内容开始在顶部梯度，而不是低于它。另外，设置一个带有中间部分的包装会破坏阴影，除非我对阴影应用了实心蒙版，这样中间的背景就不会显示出来。谢谢你的回复，虽然我考虑过CSS3，但它不是一个选项。这是一个面向社会的网站，这意味着外观非常重要。我不能让浏览器不应用阴影。由于其目标受众，我预计大部分流量将是IE用户。我不知道IE支持的替代方法。我得用谷歌搜索一下过滤的东西。只要我能让梯度永远不超过xxx像素，我就可以把图像全部去掉。谢谢你！那个元素能有最小高度吗？如果是，答案很简单！是的，它可以有一个最小高度。事实上，有一个最小高度可能比没有好，因为它需要与侧边栏的高度相匹配，或者比侧边栏的高度更大。如果roXon发布的特定于浏览器的渐变属性都不允许将渐变设置为完全相同的Y位置的颜色，那么不管div Istanks有多高，这是一个备用方案，我想我已经获得了足够的信息来完成它。Re：非css3浏览器中用于阴影和渐变的花式css。。。。如果你在IE中查看你的jsbin，阴影不能很好地处理圆角。典型的（例如：）

<div id="box-top"> // CSS bg image = 600*8px with rounded corners 

<div id="box-middle">
 <img class="box_mid_img" src="vertical_gradient_image.png"> // CSS: .box_mid_img width:100%; height:100%; position:absolute
</div>

<div id="box-bottom"> // CSS bg image = 600*8px with rounded corners