Css 如何获取包装器div'；s背景色随高度展开

我有一个div，它包装了用户可以执行的许多操作。这个div就像一个actionBar，你可以在桌面上看到它。它有3个元素：1）一个按钮组，2）一组选择和3）分页控件

前两个元素向左浮动，最后一个元素向右浮动。这非常有效，当浏览器窗口足够宽，可以容纳所有内容时，所有内容都排列得非常整齐。但是，当屏幕分辨率较小或用户使浏览器过窄时，元素会自动换行。我喜欢包装，但div不会扩展其高度（和相关背景色）以适合包装的元素

如何使div扩展其高度以适合这些包裹的元素

请参见上的操作中的问题。

请查看此问题

只需添加height:auto和溢出的auto

.wrapper {
    background-color: #CBE6A5;
    background-image: -webkit-linear-gradient(top, #CBE6A5, #E2F1CD);
    background-image: -moz-linear-gradient(top, #CBE6A5, #E2F1CD);
    height: auto;
    overflow:auto;
}

---

移除包装上的固定高度，并向其添加

溢出：auto

---

只需删除包装器div固定高度并将溢出：隐藏或自动添加到该分区。

首先，去除

.wrapper

上的静态高度。然后，您有两个选择：

使用

overflow:auto

强制

.wrapper

包含其内容（）：

.wrapper{
背景色：#CBE6A5；
背景图像：-webkit线性渐变（顶部，#CBE6A5，#E2F1CD）；
背景图像：-moz线性梯度（顶部，#CBE6A5，#E2F1CD）；
背景图像：线性渐变（顶部，#CBE6A5，#E2F1CD）；
溢出：自动；
}

注意：这可能会导致不需要的滚动条，其内容宽度超过100%（）

使用

：after

强制

.wrapper

包含其内容（）：

.wrapper{
背景色：#CBE6A5；
背景图像：-webkit线性渐变（顶部，#CBE6A5，#E2F1CD）；
背景图像：-moz线性梯度（顶部，#CBE6A5，#E2F1CD）；
背景图像：线性渐变（顶部，#CBE6A5，#E2F1CD）；
}
.包装工：之后{
显示：块；
内容：“.”；
字号：0；
身高：0；
颜色：透明；
清除：左；
}

注意：这在IE7及以下版本中不起作用

在

.wrapper

（）的末尾添加一个“clear”

div

：

---

这是正确的，我不知道为什么有人会给你-1，我只是投票赞成：）应该注意的是，如果有任何@bfrohs-通过删除高度规则，这会阻止滚动条出现，并允许div自然扩展。@j08691，用于

宽度
，而不是
高度
（我提供了一个指向JSFIDLE的链接，显示它与您的代码一起出现）。请确保将
背景图像：线性渐变（顶部，#CBE6A5，#E2F1CD）
添加到
。包装器
以实现向前兼容性。JSFIDLE链接与Matt的链接相同，并且
高度：自动；
不是必需的。哎呀！对不起！我指的是高度。
<div class="clear"></div>