web-dev-qa-db-ja.com

HTML / CSSで同じ高さのdiv（並べて配置）を実現するにはどうすればよいですか？

コンテナ内に2つのdivがあります。左側に1つ、右側に1つ、並べて配置します。内容が異なっていても、どうすればそれぞれを同じ高さにすることができますか。

たとえば、右のdivには多くのコンテンツがあり、左のdivの高さの2倍ですが、左のdivを右のdivと同じ高さに伸ばすにはどうすればよいですか？

これを実現するためのJavaScript（jQuery）コードはありますか？

javascriptjquerycssxhtml
13
James

あなたはjQueryを使用できますが、これを行うためのより良い方法があります。

この種の質問はたくさん出てきます、そして一般的に3つの答えがあります...

1。CSSを使用

これは、最も意味的に純粋なアプローチであるため、これを行うための「最良の」方法です（独自の問題があるJSに頼ることはありません）。最良の方法は、display: table-cellおよび関連する値を使用することです。 フェイクバックグラウンドテクニック （CSS3グラデーションで実行できます）を使用してみることもできます。

2。テーブルを使用

これはうまく機能しているように見えますが、意味のないレイアウトになるという犠牲が伴います。また、純粋主義者との騒ぎを引き起こします。私はテーブルの使用をほとんど避けてきました、そしてあなたもそうすべきです。

。jQuery/JavaScriptを使用

これは、JSが無効になっている場合を除いて、最もセマンティックなマークアップを持つことでメリットがあり、希望する効果が得られません。

17
alex

純粋なCSSでこれを行う方法は次のとおりですが、例（IE 7およびFirefox）で機能します）でわかるように、境界線は難しい場合がありますが、不可能ではありません。この例では、本体>ラッパー>コンテンツコンテナ>列1と列2のかなり一般的なCSS構造を想定しています。

重要なのは、下マージンとそのキャンセルパディングです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal Height Columns</title>
<style type="text/css">
<!--
* { padding: 0; margin: 0; }
#wrapper { margin: 10px auto; width: 600px; }
#wrapper #main_container { width: 590px; padding: 10px 0px 10px 10px; background: #CCC; overflow: hidden; border-bottom: 10px solid #CCC; }
#wrapper #main_container div { float: left; width: 263px; background: #999; padding: 10px; margin-right: 10px; border: 1px solid #000; margin-bottom: -1000px; padding-bottom: 1000px; }
#wrapper #main_container #right_column { background: #FFF; }
-->
</style>
</head>

<body>
<div id="wrapper">
    <div id="main_container">
        <div id="left_column">
            <p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
        </div><!-- LEFT COLUMN -->
        <div id="right_column">
          <p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
          <p>&nbsp;</p>
          <p>For example, the right div has a lot of content, and is double the height of the left div, how do I make the left div stretch to the same height of the right div?</p>
          <p>&nbsp;</p>
          <p>Is there some JavaScript (jQuery) code to accomplish this?</p>
        </div><!-- RIGHT COLUMN -->
    </div><!-- MAIN CONTAINER -->
</div><!-- WRAPPER -->
</body>
</html>

これはどのように見えるかです：

enter image description here

11
Elle

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

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

私はこれを行うための多くの試みを見てきましたが、私のOCDのニーズを満たすものはありませんでした。 JavaScriptを使用するよりはましですが、これを回避するために1秒を費やす必要があるかもしれません。

既知の欠点：

  • 動的幅のコンテナの場合、複数の要素行をサポートしません。
  • IE6では機能しません。

本拠：

base layout

  • redは、コンテンツにマージンを設定するために使用する（補助）コンテナです。
  • greenはposition: relative; overflow: hiddenであり、（オプションで、列を中央に配置する場合）text-align: center; font-size: 0; line-height: 0;
  • bluedisplay: block; float: left;または（オプションで、列を中央に配置する場合）display: inline-block; vertical-align: top;

これまでのところ、異常なことは何もありません。 blue要素のコンテンツが何であれ、絶対位置の要素を追加する必要があります（yellow;この要素のz-indexは実際の要素よりも低くする必要があることに注意してください青いボックスのコンテンツ）この要素を使用してtop: 0; bottom: 0;を設定します（左または右の位置を設定しないでください）。

base with absolute

これで、すべての要素の高さが等しくなります。ほとんどのレイアウトでは、これですでに十分です。私のシナリオでは、動的コンテンツの後に静的コンテンツが続く必要があり、静的コンテンツは同じ行にある必要があります。

enter image description here

これを実現するには、padding-bottom（dark green）eqをblue要素の固定高さコンテンツに追加する必要があります。

enter image description here

次に、yellow要素内に別の絶対位置（left: 0; bottom: 0;）要素（dark blue）を作成します。

enter image description here

おそらく、これらのボックス（yellow）がアクティブなハイパーリンクである必要があり、元の青いボックスに適用したいスタイルがある場合は、隣接する兄弟セレクターを使用します。

yellow:hover + blue {}

ここにコードと デモ があります：

HTML：

<div id="products">
    <ul>
        <li class="product a">
            <a href="">
                <p class="name">Ordinary product description.</p>
                <div class="icon-product"></div>
            </a>
            <p class="name">Ordinary product description.</p>
        </li>
        <li class="product b">
            <a href="">
                <p class="name">That lenghty product description or whatever else that does not allow you have fixed height for these elements.</p>
                <div class="icon-product"></div>
            </a>
            <p class="name">That lenghty product description or whatever else that does not allow you have fixed height for these elements.</p>
        </li>
        <li class="product c">
            <a href="">
                <p class="name">Another ordinary product description.</p>
                <div class="icon-product"></div>
            </a>
            <p class="name">Another ordinary product description.</p>
        </li>
    </ul>
</div>

SCSS/LESS：

#products { 
    ul { position: relative; overflow: hidden; text-align: center; font-size: 0; line-height: 0;  padding: 0; margin: 0;
        li { display: inline-block; vertical-align: top; width: 130px; padding: 0 0 130px 0; margin: 0; }
    }

    li {
        a { display: block; position: absolute; width: 130px; background: rgba(255,0,0,.5); z-index: 3; top: 0; bottom: 0;
            .icon-product { background: #ccc; width: 90px; height: 90px; position: absolute; left: 20px; bottom: 20px; }
            .name { opacity: 1; }
        }

        .name { position: relative; margin: 20px 10px 0; font-size: 14px; line-height: 18px; opacity: 0; }

        a:hover {
            background: #ddd; text-decoration: none;

            .icon-product { background: #333; }
        }
    }
}

デモでは、データ重複を含む回避策を使用してz-indexを修正していることに注意してください。または、pointer-events: noneなどのIE向けソリューションを使用することもできます。

3
Gajus

これは短いcssdisplay：tableを使用した非常に単純なソリューションです。

<div id="main" class="_dt-no-rows">
  <div id="aside" contenteditable="true">
    Aside
    <br>
    Here's the aside content
  </div>
  <div id="content" contenteditable="true">
    Content
    <br>
    geht's pellentesque wurscht elementum semper tellus s'guelt Pfourtz !. gal hopla
    <br>
    TIP : Just clic on this block to add/remove some text
  </div>
</div>

これがcssです

#main {
 display: table;
 width: 100%;
}
#aside, #content {
  display: table-cell;
  padding: 5px;
}
#aside {
  background: none repeat scroll 0 0 #333333;
  width: 250px;
}
#content {
background: none repeat scroll 0 0 #E69B00;
}

このように見えます

enter image description here

1
code.rider

多くの人がこの種のことのためにJavaScriptを使用することに同意しませんが、これは私がJavaScriptだけを使用してこれを達成するために使用した方法です：

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';
}

「left」と「right」は2つのdivタグのIDです。

0
Quintox303

これは私がプレーンJavaScriptで使用するものです：

長いようですが、非常に単純です！

function equalizeHeights(elements){
    //elements as array of elements (obtain like this: [document.getElementById("domElementId"),document.getElementById("anotherDomElementId")]

    var heights = [];
    for (var i=0;i<elements.length;i++){
        heights.Push(getElementHeight(elements[i],true));
    }

    var maxHeight =  heights[biggestElementIndex(heights)];

    for (var i=0;i<elements.length;i++){
        setElementHeight(elements[i],maxHeight,true);
    }
}

function getElementHeight(element, isTotalHeight){
    // isTotalHeight triggers offsetHeight
    //The offsetHeight property is similar to the clientHeight property, but it returns the height including the padding, scrollBar and the border.
    //http://stackoverflow.com/questions/15615552/get-div-height-with-plain-javascript
    {
        isTotalHeight = typeof isTotalHeight !== 'undefined' ? isTotalHeight : true;
    }

    if (isTotalHeight){
        return  element.offsetHeight;
    }else{
        return element.clientHeight;
    }
}

 function setElementHeight(element,pixelHeight, setAsMinimumHeight){

    //setAsMinimumHeight: is set, we define the minimum height, so it can still become higher if things change...
    {
        setAsMinimumHeight = typeof setAsMinimumHeight !== 'undefined' ? setAsMinimumHeight : false;
    }
    var heightStr = "" + pixelHeight + "px";
    if (setAsMinimumHeight){
        element.style.minHeight = heightStr; // pixels
    }else{
        element.style.height = heightStr; // pixels
    }
}

 function biggestElementIndex(arr){
    //http://stackoverflow.com/questions/11301438/return-index-of-greatest-value-in-an-array
    var max = arr[0];
    var maxIndex = 0;

    for (var i = 1; i < arr.length; i++) {
        if (arr[i] > max) {
            maxIndex = i;
            max = arr[i];
        }
    }
    return maxIndex;
}
0
lode

これをjqueryドキュメントレディ関数で使用します。 IDが「左」と「右」の2つのdivがあることを考慮してください。

var heightR = $("#right").height();
var heightL = $("#left").height();

if(heightL > heightR){
    $("#right").css({ height: heightL});
} else {
    $("#left").css({ height: heightR});
}
0
Pradyumn Shrivastava

私は最初の答えに同意しますが、equal_heights（）メソッドを使用したJSソリューションは、状況によっては機能しません。製品が隣り合っていると想像してください。親コンテナにのみ適用する場合は、同じ高さになりますが、2行に収まらない場合は製品名のセクションが異なる可能性があります。これは、以下を使用することをお勧めします。

https://jsfiddle.net/0hdtLfy5/3/

function make_children_same_height(element_parent, child_elements) {
    for (i = 0; i < child_elements.length; i++) {
    var tallest = 0;
    var an_element = child_elements[i];
    $(element_parent).children(an_element).each(function() {
      // using outer height since that includes the border and padding
      if(tallest < $(this).outerHeight() ){
        tallest = $(this).outerHeight();
      }
    });

    tallest = tallest+1; // some weird shit going on with half a pixel or something in FF and IE9, no time to figure out now, sowwy, hence adding 1 px
    $(element_parent).children(an_element).each(function() {
        $(this).css('min-height',tallest+'px');
    });
  }
}
0
tomhre

さて、私は大量のjQueryを実行しませんが、CSS/Javascriptの世界では、オブジェクトモデルを使用して、次のようにステートメントを記述します。

if(leftDiv.style.height > rightDive.style.height)
   rightDiv.style.height = leftDiv.style.height;
else
   leftDiv.style.height = rightDiv.style.height)
0
lkg

私がある程度成功して使用したequalHeightsと呼ばれるjQueryプラグインもあります。

私が使用しているものが上記のフィラメントグループのものであるかどうか、またはそれが これは最初のグーグルの結果でした ...どちらの方法でもjqueryプラグインはおそらく最も簡単で柔軟な方法です。

0
Jason