HTML / CSS：2つのフローティングdivを同じ高さにする

106

私は現在を使用して解決している、少し変わった問題がありtableます。以下を参照してください。基本的に、2つのdivが使用可能な幅の100％を占めるようにしたいが、必要なだけ垂直方向のスペースを占めるようにしたい（これは実際には画像から明らかではない）。図に示すように、この2つは常に高さが同じで、間に線が少しあるはずです。

_{（ソース：pici.se）}

これはtable、現在使用しているを使用して非常に簡単に実行できます。ただし、意味的にこれは実際にはテーブルではないため、解決策にあまり熱心ではありません。

html css html-table

— デニズドーガン
ソース

2

えっと…絵はどこ？私はこれについてコメントするには遅すぎることを知っています

— Ajay Kulkarni

これはWebArchive.orgからの画像リンクですhttps://web.archive.org/web/20120617031534/http://pici.se/pictures/qJRMtoLPv.png

— DidThis

160

CSSで同じ高さの列を取得するには、大量の下部パディング、同じ量の下部の負のマージンを適用し、オーバーフローを非表示にしたdivで列を囲みます。テキストを垂直方向に中央揃えにするのは少し難しいですが、これは途中で役立つはずです。

#container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head></head>

<body>
  <div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
    </div>
  </div>
</body>

スニペットを展開

言及する価値があると思います ~~以前のstreetpcの回答には無効なhtmlが含まれており、doctypeはXHTMLであり、属性は単一引用符で囲まれています。また、注目に値することは~~clearコンテナーの内部フロートをクリアするために、onの追加の要素は必要ありません。非表示のオーバーフローを使用すると、IE以外のすべてのブラウザーでフロートがクリアされます。次に、widthやzoom：1などのhasLayoutに何かを追加するだけで、IEが内部フロートをクリアします。

私はこれをすべての最新ブラウザーFF3 + Opera9 + Chrome Safari 3+およびIE6 / 7/8でテストしました。醜いトリックのように見えるかもしれませんが、うまく機能し、私はプロダクションでよく使用します。

これがお役に立てば幸いです。

— ナタリー・ダウン
ソース

1

私が提供したコードは、W3Cのバリデーターで検証します（まあ、あなたが<title>要素を追加したら、それはあなたの目的ではありませんでした）。さらに、仕様では、次の説明に従って単一引用符を使用でき

— ます

1

謝罪、私の間違い。上記の回答を修正しました。ただし、この方法では、2つのボックスが正確な高さではないため、右側の列が左側よりも大きくなると、赤が下から透けて見えることに注意してください。設計に応じて、偽の列または下マージンとパディングを使用したこの方法を選択します。

— ナタリー・ダウン

2

実際、影をカットすることに関してKevin C.によって与えられた解決策は、上部、左と右のパディングに対しては機能しますが、下部に対しては機能しません。これまでに解決策を見つけていません。

— JeanMertz

1

いい仕事ナタリー。@laarsk予測できない高さは、これが正確に何であるかではありませんか？デモを参照してください：jsfiddle.net/RT3MT/4「長い」段落を移動して確認してください

— jpillora

1

これは私が今まで見た中で最も醜いCSSハックの1つですが、私はそれを開いた腕で受け入れますlol。それが唯一の前進の方法のようです

— Matt Vukas 2014年

98

それは、2012年+ nは、もしそうならIE6 / 7について、あなたはもはやケア、display:table、display:table-rowおよびdisplay:table-cellすべての最新ブラウザでの作業：

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

アップデート2016-06-17：時間が来たと思われる場合はdisplay:flex、Flexbox Froggyをチェックしてください。

— ドミトリー・レスコフ
ソース

30

この答えが置き換えられるのはdisplay: flexいつですか？

— LandonSchropp 2013

12

いいえ、私たちは（2014年に今ある;

— サンフランシスコPresencia

9

aaaaaaandそれはおそらく2015年の終わりまでに表示を変更することができます：flex :)

— MetalWeirdo

5

私はまだ1950年代に住んでいます。

— 2015

1

2016年からこんにちは！フレックスを使用できます

— Brett Gregson

20

これを実現するには、フレックスボックスを使用する必要があります。IE8とIE9ではサポートされておらず、IE10では-msプレフィックスのみがサポートされていますが、他のすべてのブラウザーではサポートされています。ベンダープレフィックスの場合は、autoprefixerも使用する必要があります。

.parent {
    display: flex;
    flex-wrap: wrap; // allow wrapping items
}

.child {
    flex-grow: 1;
    flex-basis: 50%; // 50% for two in a row, 33% three in a row etc.
}

— ルカ・スティーブ
ソース

1

フレックスの問題は、列の周りにラッパーが必要なことです。floats + display：tableテクニックを使用すると、たとえばヘッダーと一連の列を設定でき、ヘッダーに影響を与えずに列に効果を適用できます。

— Stijn de Witt

10

あなたはこれをjsで動作させることができます：

<script>
    $(document).ready(function() {
        var height = Math.max($("#left").height(), $("#right").height());
        $("#left").height(height);
        $("#right").height(height);
    });
</script>

— アンディP.トリックス
ソース

1

この質問はすでにかなり古く、（JavaScriptを必要としない）より優れたソリューションがすでに提供されていることに注意してください。

— nirazul 2013

1

私は実際にこのソリューションが好きです。面白いし、CSSでHTMLを操作できるだけでなく、jqueryの助けを借りて操作することもできます

— csichar

6

列の高さが変更される場合、このソリューションは機能しません。これは、列の内容が変更された場合に発生する可能性があります。この関数は実行する必要があります：コンテンツの変更時とブラウザのサイズ変更時。それはこれらの問題を回避としてのCSSのアプローチは、より理想的である

— alexreardon

5

これはCSSの典型的な問題です。これに対する解決策は実際にはありません。

A List Apartのこの記事は、この問題についてよく読んでいます。これは、列を含む要素に垂直に並べられた1つの背景画像があり、同じ長さの列の錯覚を作成することに基づいて、「偽の列」と呼ばれる手法を使用します。フローティングエレメントのラッパー上にあるため、最長のエレメントと同じ長さです。

A List Apartの編集者は、記事に次のように記しています。

編集者からのメモ：現時点では優れていますが、この記事は最新のベストプラクティスを反映していない場合があります。

この手法では、液体レイアウトではうまく機能しない完全に静的な幅のデザインと、クロスデバイスサイトで現在人気のあるレスポンシブデザイン手法が必要です。ただし、静的な幅のサイトでは、信頼できるオプションです。

— フィリップ・レイバート
ソース

ありがとう、いいハックのようです。ただし、右の列には垂直方向の中央にテキストを配置する必要があることを忘れていました。私は偽のカラムがこれを行うことができないと信じていますか？

— Deniz Dogan

4

私は同様の問題を抱えていましたが、私の意見では、javascriptまたはjqueryを少しだけ使用するのが最善の選択肢です。

最も高いdiv値を取得し、その値を他のすべてのdivに適用することで、必要なdivを同じ高さにすることができます。多くのdivと多くのソリューションがある場合は、少し進んだjsコードを記述して、すべてのdivのうちどれが最も高いかを調べ、その値を使用することをお勧めします。

jqueryと2つのdivを使用すると、非常に簡単です。コード例は次のとおりです。

$('.smaller-div').css('height',$('.higher-div').css('height'));

そして最後に、最後に1つあります。それらのパディング（上部と下部）は同じでなければなりません！パディングが大きい場合は、パディングの違いを排除する必要があります。

— Brさん
ソース

1

私の知る限り、CSSの現在の実装を使用してこれを行うことはできません。高さを揃えた2つの列を作成するには、JSが必要です。

— カリンドン
ソース

1

これは、IE 7、FF 3.5、Chrome 3b、Safari 4（Windows）で機能します。

下部のより明確なdivのコメントを外すと、IE 6でも機能します。編集：ナタリー・ダウンが言ったように、代わりに単に追加width: 100%;することができます#container。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">
        #container {
            overflow: hidden;
            border: 1px solid black;
            background-color: red;
        }
        #left-col {
            float: left;
            width: 50%;
            background-color: white;
        }
        #right-col {
            float: left;
            width: 50%;
            margin-right: -1px; /* Thank you IE */
        }
    </style>
</head>
<body>
    <div id='container'>
        <div id='left-col'>
            Test content<br />
            longer
        </div>
        <div id='right-col'>
            Test content
        </div>
        <!--div style='clear: both;'></div-->
    </div>
</body>
</html>

CSSで、divの高さが固定されていない場合に、右側のdivでテキストを垂直方向に中央揃えする方法がわかりません。そうであればline-height、をdivの高さと同じ値に設定し、テキストを含む内部divをで配置できますdisplay: inline; line-height: 110%。

— 私のインスタンス
ソース

1

JavaScriptを使用して、2つのdivタグを同じ高さにすることができます。小さいdivは、以下に示すコードを使用して、最も高いdivタグと同じ高さに調整されます。

var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}

「左」と「右」はdivタグのIDです。

— Quintox303
ソース

1

cssプロパティを使用する-> display：table-cell

div {
    border: 1px solid #000;
    margin: 5px;
    padding: 4px;
	display:table-cell;
	width:25%	;position:relative;
}
body{display:table;
	border-collapse:separate;
	border-spacing:5px 5px}

<div>
    This is my div one This is my div one This is my div one
</div>
<div>
    This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
    This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>

スニペットを展開

0

JSを使用data-same-height="group_name"して、同じ高さにしたいすべての要素で使用します。

例：https : //jsfiddle.net/eoom2b82/

コード：

$(document).ready(function() {
    var equalize = function () {
        var disableOnMaxWidth = 0; // 767 for bootstrap

        var grouped = {};
        var elements = $('*[data-same-height]');

        elements.each(function () {
            var el = $(this);
            var id = el.attr('data-same-height');

            if (!grouped[id]) {
                grouped[id] = [];
            }

            grouped[id].push(el);
        });

        $.each(grouped, function (key) {
            var elements = $('*[data-same-height="' + key + '"]');

            elements.css('height', '');

            var winWidth = $(window).width();

            if (winWidth <= disableOnMaxWidth) {
                return;
            }

            var maxHeight = 0;

            elements.each(function () {
                var eleq = $(this);
                maxHeight = Math.max(eleq.height(), maxHeight);
            });

            elements.css('height', maxHeight + "px");
        });
    };

    var timeout = null;

    $(window).resize(function () {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }

        timeout = setTimeout(equalize, 250);
    });
    equalize();
});

— ウィリアム
ソース

0

私は同様のことをする必要がありました、これが私の実装です。目的を要約すると、2つの要素が特定の親コンテナの幅を占めるようにし、高さを必要なだけ高くすることです。本質的に高さは最大量のコンテンツの最大高さに等しいが、他のコンテナはフラッシュされている。

html

<div id="ven">
<section>some content</section>
<section>some content</section>
</div>

CSS

#ven {
height: 100%;
}
#ven section {
width: 50%;
float: left;
height: 100%;
}

— この男
ソース

0

数年前、このfloatプロパティはand とtableを使用したアプローチでその問題を解決するために使用されていました。display: table;display: table-row;display: table-cell;

しかし、今フレックスプロパティでは、コードの3行でそれを解決することができますdisplay: flex;とflex-wrap: wrap;とflex: 1 0 50%;

.parent {
    display: flex;
    flex-wrap: wrap;
}

.child {
 // flex: flex-grow flex-shrink flex-basis;
    flex: 1 0 50%;
}

1 0 50%それぞれにflex与えた値flex-grow flex-shrink flex-basisです。これは、個別に入力することを避けるためのflexboxの比較的新しいショートカットです。これが誰かに役立つことを願っています

— フアド・ブクレディーン
ソース