511

2 つの div 要素が並んでいます。それらの高さを同じにして、いずれかのサイズが変更されても同じままにしたいと思います。テキストが配置されたために一方が大きくなった場合、もう一方は高さに合わせて大きくなるはずです。私はこれを理解することはできません。何か案は？

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

4

24 に答える 24

689

フレックスボックス

フレックスボックスでは、それは単一の宣言です:

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

古いブラウザーではプレフィックスが必要になる場合があります。ブラウザーのサポートを参照してください。

于 2013-12-18T22:13:05.797 に答える
157

これは多くの人が遭遇する一般的な問題ですが、幸運なことに、Ed Eliot のブログのような頭の良い人たちが、解決策をオンラインで公開しています。

基本的に、 を追加してdiv/column の両方を非常にpadding-bottom: 100%高くしてから、「ブラウザをだまして」を使用してそれほど高くないと考えさせ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>

于 2010-06-08T13:47:44.810 に答える
55

これは、CSS が実際に解決策を持っていなかった領域です。<table>タグを使用する (または CSSdisplay: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 で機能します。

于 2010-06-08T14:02:23.517 に答える
48

jQuery の使用

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

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

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

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

CSS の使用

これはもう少し興味深いです。この手法は、Faux Columnsと呼ばれます。多かれ少なかれ、実際の高さを実際に同じに設定するわけではありませんが、同じ高さに見えるようにいくつかのグラフィック要素を調整します。

于 2010-06-08T14:14:15.753 に答える
17

(非常に古いが信頼できる) Absolute Columns テクニックについて誰も言及していないことに驚いています: http://24ways.org/2008/absolute-columns/

私の意見では、Faux Columns と One True Layout の技術の両方よりもはるかに優れています。

一般的な考え方は、position: absolute;will を持つ要素は、 を持つ最も近い親要素に対して配置されるということ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>
于 2013-02-06T02:21:06.237 に答える
11

Jquery の Equal Heights プラグインを使用して達成できます。このプラグインは、他のものとまったく同じ高さのすべての div を作成します。どちらかが成長すれば、もう一方も成長します。

実装例はこちら

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/

于 2010-06-08T14:03:25.327 に答える
9

このまさに答えを探しているときに、このスレッドを見つけました。小さな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>
于 2013-12-05T15:34:53.737 に答える
8

Faux Columnsを使用できます。

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

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

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

于 2010-06-08T16:24:38.477 に答える
6

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

次の CSS を Father に追加するだけで機能します<div>。

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

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

于 2016-11-17T08:34:59.347 に答える
2

フィドル_

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;            
}
于 2016-03-30T15:18:26.920 に答える
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を含める必要があります

于 2010-06-08T14:14:03.380 に答える
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>
于 2014-11-17T13:47:43.487 に答える
-1

これは、(要素の offset.top をチェックすることによって) 同じ行のすべての要素に同じ高さを設定する jQuery プラグインです。したがって、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] );

}

};

于 2015-03-31T07:55:41.847 に答える
-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');
});

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

于 2013-11-21T16:18:09.327 に答える
-3

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

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

于 2013-11-27T03:19:08.250 に答える
-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つは同じ高さのままになります。これがあなたが望むものかどうかわからない

于 2010-06-08T13:53:35.653 に答える