web-dev-qa-db-ja.com

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

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

alt text
（ソース： pici.se ）

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

htmlcsshtml-table
104
Deniz Dogan

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のすべての最新ブラウザーでこれをテストしました。いトリックのように思えるかもしれませんが、うまく機能し、本番環境で多く使用しています。

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

154
Natalie Downe

それは2012 + n年であるため、IE6/7が気にならなくなった場合、display:table、display:table-rowおよびdisplay:table-cellはすべての最新のブラウザーで動作します。

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

2016年6月17日更新：display:flexの時間が来たと思う場合は、 Flexbox Froggy をチェックしてください。

97
Dmitry Leskov

これを実現するには、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.
}
18
Luca Steeb

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

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

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

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

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

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

この手法には、リキッドレイアウトではうまく機能しない完全に静的な幅の設計と、クロスデバイスサイトで現在普及しているレスポンシブデザイン手法が必要です。ただし、静的な幅のサイトの場合は、信頼できるオプションです。

5
Philippe Leybaert

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

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

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

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

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

4
Mr Br

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>
1
user5139166
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>
1
ms muthu

これは、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; line-height: 110%でテキストを含む内部divを配置できます。

1
instanceof me

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

1
Quintox303

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

1
Calin Don

JSを使用して、同じheightにしたいすべての要素で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
Wiliam

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

しかし、今ではflexプロパティがあれば、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-grow flex-shrink flex-basisに指定したflex値です。 flexboxの比較的新しいショートカットで、個別に入力するのを避けます。これが誰かに役立つことを願っています

0
FouadDev

同様のことをする必要がありました。これが私の実装です。目的を要約すると、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
this guy