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

https://stackoverflow.com/questions/1205159

05-07-2019
|

質問

現在、 table を使用して解決している、ちょっと変わった問題があります。以下を参照してください。基本的に、2つのdivが使用可能な幅の100％を占めるようにしたいのですが、必要なだけ縦方向のスペースを占めるようにします（これは実際にはそれほど明白ではありません）。図のように、2つの高さは常に同じで、高さはまったく同じである必要があります。

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

これは、私が現在行っている table を使用して非常に簡単に実行できます。ただし、意味的にはこれは実際にはテーブルではないため、ソリューションにはあまり熱心ではありません。

解決

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 をオンにして余分な要素を必要としないことです。オーバーフロー非表示を使用すると、IE以外のすべてのブラウザーのフロートがクリアされ、widthやzoom：1などのhasLayoutを与えるために何かを追加するだけで、IEはその内部フロートをクリアします。

これは、FF3 + Opera9 + Chrome Safari 3+およびIE6 / 7/8のすべての最新ブラウザーでテスト済みです。いトリックのように思えるかもしれませんが、うまく機能し、本番環境で多く使用しています。

これが役立つことを願っています。

他のヒント

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 。

これを実現するには、flexboxを使用する必要があります。 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.
}

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

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

これはCSSの古典的な問題です。本当に解決策はありません。

A List Apartのこの記事は、この問題に関する良い読み物です。等長の列の錯覚を作成する列を含む要素に垂直にタイル状に並べられた背景画像を1つ持つ「擬似列」と呼ばれる手法を使用します。フローティング要素のラッパー上にあるため、最長の要素と同じ長さになります。

A List Apartエディターの記事には、次の注意事項があります。

編集者からのメモ：この記事は当時としては優れていますが、現代のベストプラクティスを反映していない可能性があります。

この技術には、完全に静的な幅の設計が必要です。これは、クロスデバイスサイトで現在一般的なリキッドレイアウトやレスポンシブデザイン技術ではうまく機能しません。ただし、静的な幅のサイトの場合は、信頼できるオプションです。

同様の問題があり、私の意見では、javascriptまたはjqueryを少し使用するのが最良の選択肢です。

最高のdiv値を取得し、その値を他のすべてのdivに適用することにより、必要なdivを同じ高さにすることができます。多数のdivと多数のソリューションがある場合、すべてのdivの中でどれが最も高いかを見つけてその値を使用するために、少し進歩したjsコードを書くことをお勧めします。

jqueryと2つのdivを使用すると、非常に簡単です。サンプルコードを次に示します。

$（ '。smaller-div'）。css（ 'height'、$（ '。higher-div'）。css（ 'height'））;

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

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

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>

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

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です。

cssプロパティを使用して-＆gt; 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>

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>

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

例： 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();
});

似たようなことをする必要がありました。これが私の実装です。目的を要約すると、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%;
}

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow