3

我有一个 div 包装了用户可以采取的许多操作。这个 div 就像您会在表格顶部看到的 actionBar。它有 3 个元素：1）一个按钮组，2）一组选择和 3）分页控件。

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

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

请参阅http://jsfiddle.net/mraible/bJQCL/中的实际问题。

4

4 回答 4

5

删除包装器上的固定高度并添加overflow:auto到它。

jsFiddle 示例。

于 2012-06-01T17:11:07.410 回答
0

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

于 2012-06-01T17:18:11.417 回答
0

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

  1. 用于overflow:auto强制.wrapper包含其内容（示例）：

    .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%（示例）。

  2. 用于:after强制.wrapper包含其内容（示例）：

    .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 及以下版本中不起作用。

  3. 在（示例div）末尾添加“清除” ：.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;
}
于 2012-06-01T17:25:11.247 回答
-1

看看这个小提琴

只需添加 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;
}
于 2012-06-01T17:10:45.963 回答