Question

我有一个包含用户可以执行的操作的div。这个div就像一个你在桌子顶部看到的动作栏。它有3个元素：1）按钮组，2）一组选择和3）分页控件。

我有前两个元素向左浮动而最后一个元素向右浮动。当浏览器窗口足够宽以适应所有内容时，这种方法很有效并且一切都很好。但是，当屏幕分辨率较小或用户使浏览器太窄时，元素会换行。我喜欢的包装，但div不会扩展它的高度（和相关的背景颜色）以适应包裹的元素。

如何让div扩展其高度以适应这些包裹的元素。

查看http://jsfiddle.net/mraible/bJQCL/处的问题。

Answer 1

删除包装上的固定高度并向其添加overflow:auto。

<强> jsFiddle example

Answer 2

只需删除包装div固定高度＆amp;添加溢出：隐藏或自动到该div。

Answer 3

首先，摆脱.wrapper上的静态高度。然后，您有两个选择：

使用overflow:auto强制.wrapper包含其内容（example）：

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

注意：这可能会导致不需要的滚动条内容超过100％（example）。

使用:after强制.wrapper包含其内容（example）：

.wrapper {
    background-color: #CBE6A5;
    background-image: -webkit-linear-gradient(top, #CBE6A5, #E2F1CD);
    background-image: -moz-linear-gradient(top, #CBE6A5, #E2F1CD);
    background-image: linear-gradient(top, #CBE6A5, #E2F1CD);
}
.wrapper:after {
    display:block;
    content:".";
    font-size:0;
    height:0;
    color:transparent;
    clear:left;
}

注意：这在IE7及以下版本无效。

在div（example）的末尾添加“清除”.wrapper：

<div class="clear"></div>

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

Answer 4

查看此fiddle

只需添加高度：自动和自动溢出。

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

如何获得包装器div的背景颜色以随高度扩展

4 个答案: