创建具有固定宽度和灵活高度的 div答案

【问题标题】：creating div with fixed width and flexible height创建具有固定宽度和灵活高度的 div
【发布时间】：2009-12-04 09:18:33
【问题描述】：

我正在尝试创建一个具有固定宽度和灵活高度的 div，here 是我想用作背景的图片。问题是当我的 div 大于图像高度时，底部圆角被省略，而且如果我的 div 小于图像相同大小的大小，我该如何使用所有尺寸的圆角？谢谢

【问题讨论】：

标签： javascript html css

【解决方案1】：

只使用图片的底部，其他的使用边框样式。

<div style="padding-bottom:20px; width:303px; background: url('http://i48.tinypic.com/wvvhbr.png') left bottom no-repeat;">
         <div id="myContent" style="border: 1px solid #ccc; border-bottom:none;">
          Some Content
         </div> 
    </div>

如果您需要在顶部设置圆形边框，只需将样式“背景”添加到 #myContent 并使用顶部对齐和另一个图像。

【讨论】：

别忘了剪下你的图片，只留下底部。不客气。

【解决方案2】：

使用 background-position 将确保您始终拥有圆角：

CSS：

background-position:bottom;

你必须创建一个有很多额外高度的图像，这样如果 div 最终比预期的高，你总是有空间可以玩。

另一种选择是将 div 分成 2 个单独的 div - 1 个作为主要内容部分，另一个只是将弯曲的角添加到底部。这将允许您为主 div 使用 1px 高的背景图像，并为弯曲的边框图像使用 20px(ish) 的图像，从而大大减少了文件大小。我为你附上了一个例子：Download Example

【讨论】：

【解决方案3】：

将背景图像放在底部 - 在 div 的底部添加一些填充，以便角落适合它。使背景图像非常高。

【讨论】：

"使背景图像非常高。" - 这种情况适用于低高度的 div 和大的？
而且.. divs 是动态生成的，我怎么知道每次使用哪个填充？
是的，向 div 添加一个类 - 每次填充都应该相同