web-dev-qa-db-ja.com

フローティングDIVを別のフローティングDIVの高さと一致させるにはどうすればよいですか？

私のHTMLコードは、ページをそれぞれ65％、35％の2つの列に分割しています。

<div style="float : left; width :65%; height:auto;background-color:#FDD017;">
   <div id="response">
   </div> 
</div>
<div style="float : left; width :35%;height:auto; background-color:#FDD017;">
   <div id="note">
   </div>
</div>

responsedivには、変数データが​​あります。 notedivには、固定データがあります。 2つのdivsには2つの異なるデータセットがありますが、背景色が両方を含むボックスを塗りつぶすように見えるように、同じ高さで表示する必要があります。当然、問題はresponsedivです。これは、その中に現在表示されているデータの量に応じて高さが変化するためです。

2つの列の高さが常に等しくなるようにするにはどうすればよいですか？

htmlcssheight
67
venkatachalam

背景色が適用されたdivでそれらをラップし、「列」の後にクリアdivを持ちます。

<div style="background-color: yellow;">
  <div style="float: left;width: 65%;">column a</div>
  <div style="float: right;width: 35%;">column b</div>
  <div style="clear: both;"></div>
</div>

いくつかのコメントと私自身の考えに対処するために更新されました：

このメソッドは、本質的にあなたの問題を単純化するために機能します。この「oldskool」メソッドでは、2つの列に空のクリア要素が続き、クリア要素の仕事は親に（背景で）これを伝えることですフローティング動作が終了すると、親は基本的にクリアの位置に0ピクセルの高さをレンダリングできます。

これは、親要素が最も高い列と同じ高さになるようにするためです。そして、親に背景が設定され、両方の列が同じ高さを持つように見えます。

この手法は「oldskool」であることに注意する必要があります。これは、 clearfix のような高さの計算動作をトリガーするか、親要素で単にoverflow：hiddenを使用することにより、より良い選択ができるためです.

これはこの限られたシナリオで機能しますが、各列を視覚的に異なるようにしたい場合、またはそれらの間にギャップがある場合、親要素に背景を設定しても機能しませんが、この効果を得るためのトリックがあります。

トリックは、すべての列に一番下のパディングを追加することです。予想される最大サイズまで、最短と最高の列の違いになる可能性があります。これを解決できず、大きな数字を選択したら、追加する必要があります同じ数の負の下マージン。

親オブジェクトでオーバーフローを非表示にする必要がありますが、結果は、各列がマージンによって提案されたこの追加の高さのレンダリングを要求しますが、実際にはそのサイズのレイアウトを要求しません（負のマージンは計算に反するため）。

これは、最も高い列のサイズで親をレンダリングしますが、すべての列をその高さ+使用される下部パディングのサイズでレンダリングできるようにします。この高さが親よりも大きい場合、残りは単純に切り取られます。

<div style="overflow: hidden;">
  <div style="background: blue;float: left;width: 65%;padding-bottom: 500px;margin-bottom: -500px;">column a<br />column a</div>
  <div style="background: red;float: right;width: 35%;padding-bottom: 500px;margin-bottom: -500px;">column b</div>
</div>

bowers and wilkinsのWebサイト でこの手法の例を見ることができます（ページの下部にある4つの水平スポットライト画像を参照してください）。

100
meandmycode

フローティングdivを強制的に別のdivと一致させて列効果を作成しようとする場合、これが私が行うことです。シンプルできれいだから気に入っています。

<div style="background-color: #CCC; width:300px; overflow:hidden; ">
    <!-- Padding-Bottom is equal to 100% of the container's size, Margin-bottom hides everything beyond
         the container equal to the container size. This allows the column to grow with the largest
         column. -->
    <div style="float: left;width: 100px; background:yellow; padding-bottom:100%; margin-bottom:-100%;">column a</div>
    <div style="float: left;width: 100px;  background:#09F;">column b<br />Line 2<br />Line 3<br />Line 4<br />Line 5</div>
    <div style="float:left; width:100px; background: yellow; padding-bottom:100%; margin-bottom:-100%;">Column C</div>
    <div style="clear: both;"></div>
</div>

これは理にかなっていると思います。動的コンテンツでもうまく機能するようです。

38
Dyson

これはjQueryプラグインです 複数のdivの高さを同じに設定します。そして、以下はプラグインの実際のコードです。

$.fn.equalHeights = function(px) {
$(this).each(function(){
var currentTallest = 0;
$(this).children().each(function(i){
    if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
        });
    if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
        // for ie6, set height since min-height isn't supported
    if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
        $(this).children().css({'min-height': currentTallest}); 
    });
    return this;
};
15
Justin Yost

この問題の正しい解決策は、display: table-cellを使用することです

重要：table-cellはすでにfloatを同じコンテナ内の他の要素と並ぶ要素に変換するため、このソリューションではdivは不要です。また、フロートのクリア、オーバーフロー、背景の輝き、およびfloatハックがパーティーにもたらすその他すべての厄介な驚きを心配する必要がないことも意味します。

CSS：

.container {
  display: table;
}
.column {
  display: table-cell;
  width: 100px;
}

HTML：

<div class="container">
    <div class="column">Column 1.</div>
    <div class="column">Column 2 is a bit longer.</div>
    <div class="column">Column 3 is longer with lots of text in it.</div>
</div>

関連する：

9
Aaron Digulla

フロートなしでdivにラップする必要があります。

<div style="float:none;background:#FDD017;" class="clearfix">
    <div id="response" style="float:left; width:65%;">Response with two lines</div>
    <div id="note" style="float:left; width:35%;">single line note</div>
</div>

また、ここでclearfixパッチを使用します http://www.webtoolkit.info/css-clearfix.html

6
bendewey

30秒以内に2列のテーブルをコーディングして問題を解決できると、なぜこの問題が地面に打ち付けられるのか理解できません。

このdiv列の高さの問題は、一般的なレイアウト全体にわたって発生します。単純な古い基本的なHTMLタグでスクリプトを実行するのはなぜですか？レイアウト上に巨大で多数のテーブルがある場合を除き、テーブルが大幅に低速であるという議論を買いません。

4
Erich Richter

Flexはデフォルトでこれを行います。

<div id="flex">
 <div id="response">
 </div> 
 <div id="note">
 </div>
</div>

CSS：

#flex{display:flex}
#response{width:65%}
#note{width:35%}

https://jsfiddle.net/784pnojq/1/

ボーナス：複数の行

https://jsfiddle.net/784pnojq/2/

1
Nick Manning

このコードは、可変数の行（各行に可変数のDIVを含む）を許可し、各行のすべてのDIVを最も高い隣の高さに一致させます。

id "divContainer"を持つすべてのDIV（フローティング）がコンテナー内にあると仮定した場合、次を使用できます。

$(document).ready(function() {

var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();

$('div#divContainer div').each(function(index) {

    if(currentRowStart != $(this).position().top) {

        // we just came to a new row.  Set all the heights on the completed row
        for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);

        // set the variables for the new row
        rowDivs.length = 0; // empty the array
        currentRowStart = $(this).position().top;
        currentTallest = $(this).height();
        rowDivs.Push($(this));

    } else {

        // another div on the current row.  Add it to the list and check if it's taller
        rowDivs.Push($(this));
        currentTallest = (currentTallest < $(this).height()) ? ($(this).height()) : (currentTallest);

    }
    // do the last row
    for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);

});
});
0
HardlyNoticeable

背景画像もいつでも使用できます。他の完璧な解決策はJqueryオプションだけなので、私はこのオプションに100％投票する傾向があります。

背景色で外側のdivを使用する場合と同様に、両方のdivのコンテンツが同じ高さに達する必要があります。

0
Drew

同じ種類の問題もあり、異なるコンテンツを持つ3つのdivを隣同士に配置し、それらを「分離」するために適切な境界線が必要なため、機能した唯一の解決策は、別の回答のjQueryオプションのわずかに修正されたバージョンでした。また、 here にあるスクリプトも必要であることを忘れないでください。

以下は、スクリプトのわずかに変更されたバージョンです。これにより、真の最小高さ設定が可能になります（ボックスを少なくとも特定の高さにする必要があるため）。

/*--------------------------------------------------------------------
 * JQuery Plugin: "EqualHeights"
 * by:    Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
 *
 * Copyright (c) 2008 Filament Group
 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
 *
 * Description:   Compares the heights or widths of the top-level children of a provided element
                  and sets their min-height to the tallest height (or width to widest width). Sets in em units
                  by default if pxToEm() method is available.
 * Dependencies: jQuery library, pxToEm method    (article:
                  http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)
 * Usage Example: $(element).equalHeights();
                  Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
                  Optional: to specify an actual min-height (in px), pass an integer value, regardless of previous parameter: $(element).equalHeights(false,150);
 * Version: 2.0, 08.01.2008
--------------------------------------------------------------------*/

$.fn.equalHeights = function(px,minheightval) {
    $(this).each(function(){
        if (minheightval != undefined) { 
            var currentTallest = minheightval;    
        } 
        else { 
            var currentTallest = 0;
        }
        $(this).children().each(function(i){
            if ($(this).height() > currentTallest) { 
                currentTallest = $(this).height();
            }
        });
        if (!px || !Number.prototype.pxToEm) 
            currentTallest = currentTallest.pxToEm(); //Use ems unless px is specified.
        // For Internet Explorer 6, set height since min-height isn't supported.
        if ($.browser.msie && $.browser.version == 6.0) { 
            $(this).children().css({'height': currentTallest});
        }
        $(this).children().css({'min-height': currentTallest});
    });
    return this;
};

それは魅力のように機能し、何も遅くなりません:)

0
David

両方を目的の背景色で外側のdivにラップすることをお勧めします。

0
chaos