3

ユーザーが実行できる多くのアクションをラップする div があります。この div は、テーブルの上部に表示される actionBar のようなものです。1) ボタン グループ、2) 選択のグループ、3) ページネーション コントロールの 3 つの要素があります。

最初の 2 つの要素が左に、最後の 1 つが右に浮いています。これはうまく機能し、ブラウザー ウィンドウがすべてを収めるのに十分な幅がある場合、すべてがうまく並びます。ただし、画面の解像度が小さい場合、またはユーザーがブラウザーを狭めすぎる場合、要素は折り返されます。私が好きなラッピングですが、divはラップされた要素に合わせて高さ（および関連する背景色）を拡大しません。

これらのラップされた要素に合わせて div の高さを拡張するにはどうすればよいですか。

http://jsfiddle.net/mraible/bJQCL/で実際の問題を参照してください。

4

4 に答える 4

5

ラッパーの固定高さを削除して追加overflow:autoします。

jsFiddle の例。

于 2012-06-01T17:11:07.410 に答える
0

まず、 の静的な高さを取り除き.wrapperます。次に、次の 2 つのオプションがあります。

  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 に答える
0

ラッパー div の固定高さを削除し、overflow:hidden または auto をその div に追加するだけです。

于 2012-06-01T17:18:11.417 に答える
-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 に答える