1

だからここに写真があります：

ここに画像の説明を入力してください

問題は、コンテナdivに2つのdivがあることです。コンテナdivは、必要に応じて高さが拡張され、2つの内部divも拡張されます。右のdivには境界線があります-左...しかし、それが空の場合、高さ全体を埋めることはできません....これを行うにはどうすればよいですか？

4

4 に答える 4

5

あなたが話している問題は「偽列」と呼ばれ、過去数年間にわたって報告され、説明されてきました:) http://www.alistapart.com/articles/fauxcolumns/

いくつかの解決策があります。

  • 境界線を模倣する包含 div の背景を使用します
  • CSS3 の手法を使用します (display:table と display:table-cell ですが、これらは実際にはこれや CSS3 flexbox を対象としたものではありません。CSS3 flexbox は非常に実験的で、おそらくほとんどのブラウザーでは機能しません)。
  • JS を使用して、列の高さを要素の高さの最大値に設定します

最後の解決策は非常に優れているため、jQuery を使用している場合は、次のように実現できます。

var max=0;
$('#container').children().each(function(){
    if($(this).height()>max) max = $(this).height();
});
$('#container').children().each(function(){
    $(this).height(max);
});

スクリプトはコンテナのすべての子を繰り返し処理し、最上位の要素を見つけます。次に、もう一度繰り返して、それぞれに最大の高さを設定します。

于 2012-04-19T06:35:21.063 に答える
2

HTML

<div class="wrapper">
    <div class="child_1">First Div content goes here</div>
    <div class="child_2">Second Div content goes here</div>
</div>

CSS

.wrapper {
        width: 960px;
        overflow: hidden;
        margin: 0px auto;
    }

    .child_1, .child_2 {
        padding-bottom: 9999em;
        margin-bottom: -9999em;
        width: 50%;
        float: left;
    }

    .child_1 {
        background: #f00;
    }

    .child_2 {
        background: #0f0;
    }
于 2012-04-19T08:10:34.537 に答える
0

左のdivにborder-rightを追加してみてください。コンテナ div 内に div を追加し、明確なクラスを指定します。次に、css に次を追加します: .clear{clear:both;}

于 2012-04-19T06:33:04.443 に答える
0

これはあなたが探しているものです...

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

また、私はあなたが を使用していると仮定しているfloatので、これを読むことを強くお勧めします:

http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

...フロートをクリアすることを忘れないでください！

于 2012-04-19T06:42:01.780 に答える