2つのdivを同じ高さに保つにはどうすればよいですか？

441

2つのdivが並んでいます。それらの高さを同じにして、そのうちの1つがサイズ変更しても同じままにしたいです。私はこれを理解することはできません。アイデア？

混乱を招く質問を明確にするために、両方のボックスを常に同じサイズにしたいので、テキストが配置されたために1つが大きくなった場合、もう1つは高さに合わせて大きくする必要があります。

<div style="overflow: hidden">
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!
    </div>
</div>
スニペットを展開

html  css  html-table  flexbox 
— NibblyPig
ソース
それらの1つが大きくなった場合、他の1つが同じ高さのサイズを維持するようにしますか？
— Wai Wong
ソリューションではないが編集可能な環境にある例は、jsfiddle.net
— MvanGeest
— C. Hare

回答:

591

フレックスボックス

フレックスボックスを使用すると、1つの宣言になります。

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}
<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>
スニペットを展開

古いブラウザでは接頭辞が必要な場合があります。ブラウザのサポートをご覧ください。

— パブロ
ソース
17
フレックスボックスは魅力のように働きました。レスポンシブデザインを開発していて、2番目のdivを小さな画面で表示させたい場合は、.rowをdisplay：blockに設定する必要があります。メディアクエリで。
— Nick Zulu
7
@NickZuluこの場合は設定する必要があると思いますflex-direction: column：jsfiddle.net/sdsgW/1
— Pavlo
1
@Ecksteinは両方のソリューションに必要ではありません。デモをご覧ください。
— 2014年
3
高さ：100％を追加するまで、これは機能しませんでした。子供のコラムへ
— Jacob Raccuia '21 / 06/21
1
1つの特定の子divに他のdivの高さを決定させることは可能ですか？そのため、他の子divのコンテンツが変更されている場合、その特定のdivの高さを変更することはできません
— Narek Malkhasyan
149

これは多くの人が遭遇した共通の問題ですが、幸運にも彼のブログのEd Eliotのような賢い心が彼らの解決策をオンラインに投稿しています。

基本的にあなたがすることは、を追加することで両方のdiv /列を非常に高くしpadding-bottom: 100%、「ブラウザをだまして」、を使用してそれらがそれほど高くないと考えさせることmargin-bottom: -100%です。エド・エリオット氏のブログでよりよく説明されており、多くの例も含まれています。

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
}
<div class="container">

    <div class="column">
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
    </div>

    <div class="column">
        Something
    </div>

</div>
スニペットを展開

— ラムダ
ソース
1
1つのTrue Layoutの説明はやや不十分でしたが、最初のリンクを確認した後、彼が使用した例の1つからそれをうまく実装しました。ただし、列の下部の境界線を表すために画像を使用する必要があり、クロスブラウザーのサポートには疑わしいため、これは本当に悪いことです。ただし、機能し、JavaScriptに依存しないため、正しいものとしてマークします。ありがとう！
— NibblyPig 2010年
これは古いIEブラウザーでは動作しないようです（そうです、残念ながら、私はまだIE6をサポートする必要があります）。これを互換にする方法はありますか？
— strongriley 2012年
1
@strongriley Checkout Ed Eliotのブログ：ejeliot.com/blog/61 IE6で動作するはずです。多分問題は他の場所で引き起こされていますか？
— mqchen 2012年
1
これは、ウィンドウが狭すぎて、divが互いに下に配置されている場合に壊れます。
— WhyNotHugo 2013
1
たとえばpadding: 7px 10px、padding-bottomプロパティが100％に設定されている場合、表のセルに実際に表示したいセルのパディングをどのように定義しますか？（PS overflow:hiddenも私に必要でしたrow）
— user1063287
55

これは、CSSがソリューションをまったく提供していない領域です。「要素の束を同じ高さに保つ」ことが実装された唯一の場所であるため、<table>タグを使用する（またはCSS display:table*値を使用して偽装する）ことになります。

<div style="display: table-row;">

    <div style="border:1px solid #cccccc; display: table-cell;">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>

    <div style="border:1px solid #cccccc;  display: table-cell;">
        Some content!
    </div>

</div>

これは、Firefox、Chrome、Safariのすべてのバージョン、少なくともバージョン8以降のOpera、およびバージョン8以降のIEで機能します。

— Paul D. Waite
ソース
5
このソリューションはIE6 / IE7をサポートする必要のある人には利用できませんが、私はそれが最もクリーンだと信じています。
— twsaef
2
この答えは完璧です！ちょっとしたリマインダー：一部のクライアントでは「テーブル行」ではなく「テーブル」が必要になる場合があります
— tiborka
@ user2025810：ああ、ありがとう。table代わりにどのクライアントが必要か知っていますtable-rowか？
— ポールD.ウェイト2013
@ user2025810：ええ、私がこれまでにテストしたことがないとは言えません:)知っておくと良いのですが、乾杯。（PDFを重視しているため、CSS 2.1の印刷関連の機能のうち、ブラウザーにはあまり実装されていないものをサポートしていると思います。）
— Paul D. Waite
7
このソリューションでは、混乱を招く親要素widthを追加display: tableしない限り、divにパーセンテージを使用することを忘れてください。
— Alex G
42

jQueryの使用

jQueryを使用すると、非常にシンプルな1行のスクリプトで実行できます。

// HTML
<div id="columnOne">
</div>

<div id="columnTwo">
</div>

// Javascript
$("#columnTwo").height($("#columnOne").height());

CSSの使用

これはもう少し興味深いです。この手法は、フェイクカラムと呼ばれます。多かれ少なかれ実際に実際の高さを同じに設定するのではなく、いくつかのグラフィック要素をリグして、それらが同じ高さに見えるようにします。

— デレク・アデア
ソース
JavaScriptを使うのはとても良い方法だと思います。問題は-無効になっている場合、バラバラになります。私はとにかくこれを使用して、私ができる最高の緊急事態を構築すると思います;-）ありがとう！
— nicorellius
13
これは、columnOneの高さが常にcolumnTwoよりも大きいことを意味します。
— セバスチャンリ
1
列の高さを適用する前に、列の高さを比較する必要があります。私はjsがこの問題に最適な方法だと思います。ほとんどすべてのブラウザーはjsに対応しています。
— SalmanShariati 14
6
これは、ページが最初にロードされたときにも機能します。次にウィンドウのサイズが変更され、
— divの
16

（非常に古いが信頼できる）Absolute Columns手法について誰も言及していないことに驚いています：http : //24ways.org/2008/absolute-columns/

私の意見では、Faux ColumnsやOne True Layoutのテクニックよりもはるかに優れています。

一般的な考え方は、を持つ要素は、position: absolute;を持つ最も近い親要素に対して配置されるということposition: relative;です。次に、a top: 0px;とbottom: 0px;（または実際に必要なピクセル/パーセンテージ）の両方を割り当てることにより、列を100％の高さに塗りつぶします。次に例を示します。

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container
      {
        position: relative;
      }

      #left-column
      {
        width: 50%;
        background-color: pink;
      }

      #right-column
      {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 50%;
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="left-column">
        <ul>
          <li>Foo</li>
          <li>Bar</li>
          <li>Baz</li>
        </ul>
      </div>
      <div id="right-column">
        Lorem ipsum
      </div>
    </div>
  </body>
</html>
— ジオフリー
ソース
1
右側の列に左側よりも多くの行がある場合、コンテンツはオーバーフローします。
— David 14
11

JqueryのEqual Heightsプラグインを使用して実現できます。このプラグインは、すべてのdivを他のdivとまったく同じ高さにします。それらの1つが成長し、他のも成長する場合。

ここに実装のサンプル

Usage: $(object).equalHeights([minHeight], [maxHeight]);

Example 1: $(".cols").equalHeights(); 
           Sets all columns to the same height.

Example 2: $(".cols").equalHeights(400); 
           Sets all cols to at least 400px tall.

Example 3: $(".cols").equalHeights(100,300); 
           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

こちらがリンクです

http://www.cssnewbie.com/equalheights-jquery-plugin/

— Starx
ソース
8

Faux Columnsを使用できます。

基本的には、含まれているDIVの背景画像を使用して、2つの高さの等しいDIVをシミュレートします。この手法を使用すると、コンテナーにシャドウ、丸みを帯びた角、カスタムの境界線、またはその他のファンキーなパターンを追加することもできます。

ただし、固定幅のボックスでのみ機能します。

十分にテストされ、すべてのブラウザで適切に動作しています。

— アルベシスタッド
ソース
7

まさにこの答えを探しているときに、このスレッドを見つけました。私は小さなjQuery関数を作成しました。これが役立つことを願って、魅力のように機能します。

ジャバスクリプト

var maxHeight = 0;
$('.inner').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
});
$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

HTML

<div class="lhs_content">
    <div class="inner">
        Content in here
    </div>
</div>
<div class="rhs_content">
    <div class="inner">
        More content in here
    </div>
</div>
— マイク・ウェルズ
ソース
1
outerHeightを使用して、パディングと境界線を含めました。これは私が考える最もクリーンなソリューションです。
— セバスチャンリ
私が探していた完璧なソリューション。他のソリューションは、行にいくつかの列がある場合に適していますが、このアプローチは複雑なhtmlコンテンツに適しています。小さな追加：レスポンシブページでドキュメントのサイズを変更しても、固定されているためコンテンツの高さは変わりません。そこで、$（ '。inner'）。css（{height： "initial"}）;を追加しました。高さをデフォルトに設定する「各関数」の前。
— bafsar 2017年
5

CSSグリッドの方法

これを行う最新の方法（<div class="row"></div>2つのアイテムごとに-wrapper を宣言する必要もない）は、CSSグリッドを使用することです。これにより、アイテムの行/列間のギャップを簡単に制御することもできます。

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */
  grid-row-gap: 10px; 
  grid-column-gap: 10px;
}

.grid-item {
  background-color: #f8f8f8;
  box-shadow: 0 0 3px #666;
  text-align: center;
}

.grid-item img {
  max-width: 100%;
}
<div class="grid-container">
  <div class="grid-item">1 <br />1.1<br />1.1.1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    3.1
  </div>
  <div class="grid-item">4</div>
  <div class="grid-item">5 <br />1.1<br />1.1.1</div>
  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />
    6.1</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9 <br />1.1<br />1.1.1</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    11.1
  </div>
  <div class="grid-item">12</div>
</div>
スニペットを展開

— コネクソ
ソース
4

この質問は6年前に尋ねられましたが、今日のflexboxレイアウトで簡単な答えを出すのはまだ価値があります。

以下のCSSを親に追加するだけで機能します<div>。

display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;

最初の2行は、フレックスボックスとして表示されることを宣言しています。そしてflex-direction: row、その子が列に表示されることをブラウザに伝えます。またalign-items: stretch、すべての子要素が同じ高さまで伸び、そのいずれかが高くなるという要件を満たします。

— ヘグウィン
ソース
1
@TylerHしかし、質問は彼の質問を編集I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.し、承認された回答に記載されていないものを追加しました...私はここで完了しました。多分私はそれを受け入れられた答えにコメントするべきでしたか？
— Hegwin 2016年
1
単純なCSS宣言によってすでにカバーされているため、明示的には言及されていません。回答のスニペットをフルスクリーンで開き、ブラウザウィンドウのサイズを変更して確認します。それらは互いに同じサイズのままです。
— TylerH 2016年
1
受け入れられた回答がflexboxを使用していても、これは異なるアプローチを持っています。align-items：ストレッチは、非常に特殊な状況で問題を解決するための道筋を開くものです。
— BenoitLussier
align-items: stretch;flexのデフォルトではありませんか？
— madav 2018
3

CSS Flexboxとmin-heightを使用するとうまくいきました

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

内部に2つのdivを持つコンテナがあり、それらの2つのdivの高さを同じにしたいとします。

コンテナに「display：flex」と「align-items：stretch」を設定します

次に、子divに「min-height」を100％に指定します

以下のコードを参照してください

.container {
  width: 100%;
  background: linear-gradient(red,blue);
  padding: 1em;
  /* important */
  display: flex;
  /* important */
  align-items: stretch;
  justify-content: space-around;
}

.child {
  width: 100%;
  background: white;
  color: grey;
  margin: 0 .5em;
  padding: .5em;
  /* important */
  min-height: 100%;
}
<div class="container">
  
  <div class="child"><p>This is some text to fill the paragraph</p></div>
  <div class="child"><p>This is a lot of text to show you that the other div will stretch to the same height as this one even though they do not have the same amount of text inside them. If you remove text from this div, it will shrink and so will the other div.</p></div>
  
</div>
スニペットを展開

— RealMJDev
ソース
2

divsの1つがマスターであることを気にせず、両方divのsの高さを指示する場合は、次のようになります。

フィドル

何があっdivても、右側のはdiv、左側のの高さに合わせて拡大またはスキッシュ＆オーバーフローします。

どちらも divのはコンテナの直接の子である必要があり、その中での幅を指定する必要があります。

関連するCSS：

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}
— ハッシュブラウン
ソース
2

これを実現するには、疑似要素を使用するのが好きです。コンテンツの背景として使用して、スペースを埋めることができます。

これらのアプローチを使用すると、列、境界線などの間にマージンを設定できます。

.wrapper{
  position: relative;
  width: 200px;
}
.wrapper:before,
.wrapper:after{
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  border: 2px solid blue;
  position: absolute;
  top: 0;
}
.wrapper:before{
  left: 0;
  background-color: red;
}
.wrapper:after{
  right: 0;
  background-color: green;
}

.div1, .div2{
  width: 40%;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.div1{
  margin-right: 20%;
}
<div class="wrapper">
  <div class="div1">Content Content Content Content Content Content Content Content Content
  </div><div class="div2">Other</div>
</div>
スニペットを展開

— エイドリアン・メネンデス
ソース
1

フィドル

HTML

<div class="container">

    <div class="left-column">

    </div>

    <div class="right-column">
        <h1>Hello Kitty!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
    </div>

</div>

CSS

.container {
    float: left;
    width: 100%;
    background-color: black;
    position: relative;
    left: 0;
}

.container:before,
.container:after {
    content: " ";
    display: table;
}

.container:after {
    clear: both;
}

.left-column {
    float: left;
    width: 30%;
    height: 100%;
    position: absolute;
    background: wheat;
}

.right-column {
    float: right;
    width: 70%;
    position: relative;
    padding: 0;
    margin: 0;
    background: rebeccapurple;            
}
— ドルジョルジェポランコ
ソース
1

上記のほとんどすべての方法を試しましたが、フレックスボックスソリューションはSafariでは正しく機能せず、グリッドレイアウトの方法は古いバージョンのIEでは正しく機能しません。

このソリューションはすべての画面に適合し、クロスブラウザー互換性があります。

.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}

@media (max-width: 767px){
    .container li { display: inline-block; width:100%; min-height:auto!important;}
}

上記の方法はセルの高さに等しく、モバイルやタブレットなどの小さな画面では、上記の方法を使用できます@media。

— ジョディショップ
ソース
0

jQueryを使用してこれを簡単に実現できます。

CSS

.left, .right {border:1px solid #cccccc;}

jQuery

$(document).ready(function() {
    var leftHeight = $('.left').height();
    $('.right').css({'height':leftHeight});
});

HTML

   <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
   </div>
   <div class="right">
    <p>Lorem ipsum dolor sit amet.</p>
   </div>

jQueryを含める必要があります

— pixeltocode
ソース
1
両方に<div>動的コンテンツがある場合、これは機能しません。私が言う理由は<div class="right">、他の問題が発生するより多くのコンテンツがある場合です。
— スーリヤ2013年
0

長い間知っていますが、とにかく私の解決策を共有します。これはjQueryのトリックです。

--- HTML 

<div class="custom-column">
    <div class="column-left">
        asd
        asd<br/>
        asd<br/>
    </div>
    <div class="column-right">
        asd
    </div>
</div>

<div class="custom-column">
    <div class="column-left">
        asd
    </div>
    <div class="column-right">
        asd
        asd<br/>
        asd<br/>
    </div>
</div>

---- CSS

<style>
.custom-column { margin-bottom:10px; }
.custom-column:after { clear:both; content:""; display:block; width:100%; }
    .column-left { float:left; width:25%; background:#CCC; }
    .column-right { float:right; width:75%; background:#EEE; }
</style>

--- JQUERY

<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $balancer = function() {
        $('.custom-column').each(function(){
            if($('.column-left',this).height()>$('.column-right',this).height()){
                $('.column-right',this).height($('.column-left',this).height())
            } else {
                $('.column-left',this).height($('.column-right',this).height())
            }

        });

    }
    $balancer();
    $(window).load($balancer());
    $(window).resize($balancer());

});
</script>
— ロイ・ビンセント
ソース
-1

これは、同じ行のすべての要素に同じ高さを設定するjQueryプラグインです（要素のoffset.topをチェックすることにより）。したがって、jQuery配列に複数の行の要素（offset.topが異なる）が含まれている場合、各行には、その行の最大高さを持つ要素に基づいて、高さが分離されます。

jQuery.fn.setEqualHeight = function(){

var $elements = [], max_height = [];

jQuery(this).css( 'min-height', 0 );

// GROUP ELEMENTS WHICH ARE ON THE SAME ROW
this.each(function(index, el){ 

    var offset_top = jQuery(el).offset().top;
    var el_height = jQuery(el).css('height');

    if( typeof $elements[offset_top] == "undefined" ){
        $elements[offset_top] = jQuery();
        max_height[offset_top] = 0;
    }

    $elements[offset_top] = $elements[offset_top].add( jQuery(el) );

    if( parseInt(el_height) > parseInt(max_height[offset_top]) )
        max_height[offset_top] = el_height;

});

// CHANGE ELEMENTS HEIGHT
for( var offset_top in $elements ){

    if( jQuery($elements[offset_top]).length > 1 )
        jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );

}

};

— デジャン・クディッチ
ソース
-2 
    var numexcute = 0;
    var interval;
    $(document).bind('click', function () {

        interval = setInterval(function () {
            if (numexcute >= 20) {
                clearInterval(interval);
                numexcute = 0;
            }
            $('#leftpane').css('height', 'auto');
            $('#rightpane').css('height', 'auto');
            if ($('#leftpane').height() < $('#rightpane').height())
                $('#leftpane').height($('#rightpane').height());
            if ($('#leftpane').height() > $('#rightpane').height())

                $('#rightpane').height($('#leftpane').height());
            numexcute++;
        }, 10);

    });
— tcao
ソース
1
解答にはコメントを付けてください。
— sgnsajgon 2013
-2

私は同じ問題を抱えていたので、jqueryは今日すべてのWebアプリケーションの一部であるため、jqueryを使用してこの小さな関数を作成しました。

function fEqualizeHeight(sSelector) {
    var sObjects = $(sSelector);

    var iCount = sObjects.length;

    var iHeights = [];

    if (iCount > 0) {
        $(sObjects).each(function () {
            var sHeight = $(this).css('height');
            var iHeight = parseInt(sHeight.replace(/px/i,''));
            iHeights.push(iHeight);
        });

        iHeights.sort(function (a, b) {
            return a - b
        });

        var iMaxHeight = iHeights.pop();

        $(sSelector).each(function () {
            $(this).css({
                'height': iMaxHeight + 'px'
            });
        });
    }
}

ページ準備イベントでこの関数を呼び出すことができます

$(document).ready(function(){
   fEqualizeHeight('.columns');
});

これがうまくいくことを願っています。

— マスタープログラマー
ソース
-3

私は最近これに遭遇し、解決策があまり好きではなかったので、実験してみました。

.mydivclass {inline-block; vertical-align: middle; width: 33%;}

— tushar747
ソース
-4 
<div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!

</div>

</div>

ここでは、高さをmin-heightに変更し、固定値を指定しました。それらの1つがサイズ変更されている場合、他の1つは同じ高さのままになります。これがあなたが欲しいものかどうかわかりません

— ワイウォン
ソース
OPは、divの高さが常に同じであることを望んでいました。
— Simon Forsberg
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.