-1

ピンタレストのレイアウトのようなブロックのグリッドを作成していたときに、フロート要素がすべてその行の最も高いブロックの高さまで拡大することを発見しました。

"おい！" と思いました。「これを適用して、サイドバーをコンテンツと同じ高さにしてみませんか!」しかし、何らかの理由で、そのようには機能しません。フロートをグリッドのように使用するだけの高さの同じ列の解決策を探しましたが、そうではないようです。

したがって、私の質問は次のように要約できます。浮動正方形のグリッドと同じくらい簡単に同じ高さの列を作成するにはどうすればよいですか?

4

2 に答える 2

2

もちろん、ハック、JavaScript、または何百万もの余分なマークアップなしで、同じ高さの列を作成できます (ただし、IE7 以下ではサポートが不十分です)。秘密はdisplay: table-cell、隣接する要素を使用することです。

HTML:

<div class="container">
    <div id="col1">
        Small content here
    </div>

    <div id="col2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

CSS:

div.container { display: table }

div.container > div { display: table-cell; border: 1px solid; padding: 1em }

div#col1 { background: orange }

デモ：

http://jsfiddle.net/y9e4d/

于 2012-11-16T20:23:35.330 に答える
1

height: 100% を使用できますが、親要素の高さが 100% である必要があります。html と body の高さを 100% に設定することから始めて、要素を順に見ていきます。

jQuery を使用して特定の要素の高さを取得し、選択した要素に基づいて jQuery を使用してサイドバーの高さを設定することもできます。

次のようなものかもしれません：

$(document).ready(function() {
$('#sidebar').height($('#container').height());
});

作業例:

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script>
        $(document).ready(function() {
                         $('#sidebar').height($('#container').height());
                    });
    </script>
    </head>
    <body>

            <div style="height: 200px; border: 1px solid red; width: 500px; float: left;" id="container">Content</div>
            <div style="border: 1px solid green;" id="sidebar">Sidebar</div>

    </body>
    </html>
于 2012-11-16T19:57:02.613 に答える