web-dev-qa-db-ja.com

2つの隣り合ったdivを同じ高さに保つにはどうすればいいですか？

私は2つのdivを並べています。私はそれらの高さが同じであることを望み、そしてそれらのうちの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>
htmlcsscss3html-tableflexbox
391
NibblyPig

フレックスボックス

Flexboxでは、これは単一の宣言です。

.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>

古いブラウザではプレフィックスが必要かもしれません。 ブラウザのサポート を参照してください。

515
Pavlo

これは多くの人が遭遇した一般的な問題ですが、幸いなことに Ed Eliotが彼のブログに書いた のような賢い頭脳は/彼らの解決策をオンラインで投稿しました。

基本的にあなたがすることはpadding-bottom: 100%を追加することによってdivs/columns very 両方の高さを作り、それからそれらがmargin-bottom: -100%を使ってそれほど背が高いとは思わないようにすることです。 Ed Eliotによる彼のブログでの説明がもっとよくなっています。

.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>
142
mqchen

これは、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で動作します。

54
Paul D. Waite

Javascriptを使う

jQueryを使用すると、非常に単純な1行のスクリプトでそれを行うことができます。

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

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

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

CSSを使う

これはもう少し面白いです。このテクニックは Faux Columns と呼ばれています。多かれ少なかれ実際に actual の高さを同じに設定するのではありませんが、いくつかのグラフィカル要素をリグアップして look 同じ高さにします。

37
Derek Adair

誰も（非常に古いが信頼できる）絶対列法を述べていないことに驚きます： http://24ways.org/2008/absolute-columns/

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

一般的な考え方は、position: absolute;を持つ要素は、position: relative;を持つ最も近い親要素に対して配置されるということです。次に、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>
12
geofflee

あなたが達成するためにJqueryのEqual Heights Pluginを使うことができます。このプラグインは他と全く同じ高さの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/ /

11
Starx

Faux Columns を使うことができます。

基本的にそれは2つの等しい高さのDIVをシミュレートするために包含DIVの背景画像を使用します。このテクニックを使用すると、影、丸みを帯びた角、カスタム枠、またはその他のファンキーなパターンをコンテナに追加することもできます。

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

すべてのブラウザで十分にテストされ、正しく機能しています。

8
Arve Systad

この答えを探しながら、このスレッドを見つけてください。小さな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>
5
Mike Wells

この質問は6年前に聞かれましたが、今日では flexbox layoutで簡単な答えを出すことはまだ価値があります。

次のCSSを父親の<div>に追加するだけで、うまくいきます。

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

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

3
Hegwin

divのうちの1人がマスターであり、両方のdivの高さを指定しても構わない場合は、次のようになります。

Fiddle

何に関係なく、右側の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
Hashbrown

私はこれを達成するために疑似要素を使うのが好きです。あなたは、コンテンツの背景としてそれを使用して、それらがスペースを埋めるようにすることができます。

これらの方法では、列、枠線などの間に余白を設定できます。

.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>
2
Adrian Menendez

CSSグリッドウェイ

これを行うための現代的な方法（これは、2つの項目ごとに<div class="row"></div>-ラッパーを宣言する必要もなくなります）は、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>
1
connexo

上記のほとんどすべての方法を試しましたが、flexboxソリューションは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
Jodyshop

これを簡単に達成するために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 を含める必要があります。

0
pixeltocode

私はそれが昔からあると知っていますが、私はとにかく私の解決策を共有します。これは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>
0
Roy Vincent

Fiddle /

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;            
}
0
drjorgepolanco