親の高さを指定せずに子divを強制的に親divの高さの100％にする方法は？

次のような構造のサイトがあります。

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

ナビゲーションは左側にあり、コンテンツdivは右側にあります。content divの情報はPHPを通じて取り込まれるため、毎回異なります。

どのページが読み込まれても、ナビゲーションの高さを垂直方向にスケーリングして、コンテンツのdivの高さと同じになるようにするにはどうすればよいですか？

注：この回答は、Flexbox標準をサポートしていないレガシーブラウザに適用されます。最新のアプローチについては、https：//stackoverflow.com/a/23300532/1155721を参照してください。

クロスブラウザCSSを使用し、ハックなしの高さの等しい列を確認することをお勧めします。

基本的に、ブラウザー互換性のある方法でCSSを使用してこれを行うのは簡単ではありません（しかしテーブルでは簡単です）ので、適切な事前にパッケージ化されたソリューションを見つけてください。

また、答えは、100％の高さと同じ高さのどちらを使用するかによって異なります。通常は同じ高さです。高さが100％の場合、答えは少し異なります。

親の場合：

display: flex;

プレフィックスhttp://css-tricks.com/using-flexbox/を追加する必要があります。

編集：@Adam Garnerが指摘したように、align-items：stretch; 必要ありません。その使用法は、子供ではなく親にも使用されます。ストレッチする子を定義する場合は、align-selfを使用します。

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

これは、デザイナーを常に悩ませているイライラする問題です。コツは、CSSでBODYとHTMLの高さを100％に設定する必要があることです。

html,body {
    height:100%;
}

この一見無意味なコードは、ブラウザに対して100％の意味を定義することです。はい、イライラしますが、最も簡単な方法です。

のdisplay: table-cell;代わりに2つの列を設定するとfloat: left;うまくいくことがわかりました。

予想外に短いコンテンツdivが発生した場合にナビゲーションdivがクリップされることを気にしない場合は、少なくとも1つの簡単な方法があります。

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

そうでなければ偽の列のテクニックがあります。

#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

jQueryを使用：

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});

下余白を100％にしてみてください。

margin-bottom: 100%;

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

この例を見てください。

height : <percent>トップレベルにピクセル、emsなどで固定された高さの指定されたパーセントの高さを持つすべての親ノードがある場合にのみ機能します。このようにして、高さが要素までカスケードします。

前に述べた@Travisのように、html要素とbody要素に100％を指定して、ページの高さをノードまでカスケードすることができます。

長い間検索して試した後、何も私の問題を解決しました

style = "height:100%;"

子供たちのdiv

そして親のためにこれを適用してください

.parent {
    display: flex;
    flex-direction: column;
}

また、私はブートストラップを使用していますが、これによってレスポンシブが破損することはありませんでした。

この記事で説明した方法に基づいて、私は以下の動的ソリューションを作成しました：

HTML：

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

もっと少なく：

/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;

/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;

#container3 {
    float: left;
    width: 100%;
    overflow: hidden;
    background-color: red;
    position: relative;

    #container2 {
        float: left;
        width: 100%;
        position: relative;
        background-color: yellow;
        right: @col3Width;

        #container1 {
            float: left;
            width: 100%;
            position: relative;
            right: @col2Width;
            background-color: green;

            #col1 {
                float: left;
                width: @col1Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding;
                overflow: hidden;
            }

            .col2 {
                float: left;
                width: @col2Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 2;
                overflow: hidden;
            }

            #col3 {
                float: left;
                width: @col3Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 4;
                overflow: hidden;
            }
        }
    }
}

display: grid親に追加

質問が出されてからは長い間だったと思いますが、簡単な解決策を見つけ、誰かがそれを使用できると思っていました（英語が下手でごめんなさい）。ここに行く：

CSS

.main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

HTML

<div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

簡単な例。応答性に変えることができることに注意してください。

私の解決策：

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});

質問のタイトルと内容に少し矛盾があります。タイトルは親divについて語っていますが、この質問では、2つの兄弟div（ナビゲーションとコンテンツ）を同じ高さにしたいように聞こえます。

（a）ナビゲーションとコンテンツの両方をメインの高さの100％にしますか、または（b）ナビゲーションとコンテンツを同じ高さにしますか？

私は（b）を想定します...そうであれば、現在のページ構造（少なくとも、純粋なCSSとスクリプトがない場合）を前提にしてそれを行うことができるとは思いません。あなたはおそらく次のようなことをする必要があります：

<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

そしてコンテンツdivを設定して、ナビゲーションペインの幅に関係なく、左マージンを設定します。このように、コンテンツのコンテンツはナビゲーションの右側にあり、ナビゲーションdivをコンテンツの高さの100％に設定できます。

編集：これは完全に頭の中で行いますが、おそらくナビゲーションdivの左マージンを負の値に設定するか、絶対左を0に設定して、左端に戻す必要があります。問題は、これを回避する方法はたくさんありますが、すべてがすべてのブラウザと互換性があるわけではないということです。

[別の回答でDmityのLessコードを参照]これはある種の「疑似コード」だと思いますか？

私が理解していることから、トリックを行うべきである偽造カラム技術を使用してみてください。

http://www.alistapart.com/articles/fauxcolumns/

お役に立てれば ：）

このトリックは機能します。HTMLのセクションに、clear：bothのスタイルで最後の要素を追加します。

    <div style="clear:both;"></div>

その前のすべてが高さに含まれます。

position: absolute;子供に与えることは私の場合に働きました

CSS Flexboxを使用している

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

CSSフレックスボックスとグリッドがCSSに実装されているため、この回答はもはや理想的ではありません。しかし、それはまだ実用的な解決策です

小さい画面では、col1、col2、col3が互いに積み重ねられているため、高さをautoのままにしておくことをお勧めします。

ただし、メディアクエリのブレークポイントの後、colsをすべての列で同じ高さで隣り合わせに表示する必要があります。

1125 pxは、すべての列を同じ高さに設定したいウィンドウ幅ブレークポイントの例にすぎません。

<div class="wraper">
    <div class="col1">Lorem ipsum dolor sit amet.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
    <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>

もちろん、必要に応じてより多くのブレークポイントを設定できます。

<script>
    $(document).ready(function(){
        $(window).on('load resize', function() {
            let vraperH = $('.wraper').height();
            if (window.innerWidth>= 1125) {
              $('.col1').height(vraperH);
              $('.col2').height(vraperH);
              $('.col3').height(vraperH);
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>

私はそれがHakam Fostokの回答に基づいて働いていた、同じ問題を持っていた、私は小さな例を作成した、いくつかのケースでは、追加することなく働くかもしれないdisplay: flex;し、flex-direction: column;親コンテナに

.row {
    margin-top: 20px;
}

.col {
    box-sizing: border-box;
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    background-color: #a0a0a0;
    height: 100%;
}

JSFiddle

前に示したように、flexboxが最も簡単です。例えば。

#main{ display: flex; align-items:center;}

これにより、すべての子要素が親要素内の中央に配置されます。

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

から：

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

はブートストラップを示していますが、これを使用するためにブートストラップは必要ありません。これは私にとってはうまくいったので、この古い質問に答えると、実装はかなり簡単に思えます。

これは私がこの質問に提供したのと同じ答えでした

ここでposition: absoluteは、コンテンツコンテナとposition: relative親コンテナにます。

それを行うための現代的な方法については- フレックスボックスが最適です。

これを行う最も簡単な方法は、偽造することです。List Apartは、2004年のDan Cederholmからのこの記事のように、長年にわたってこれを広範囲にカバーしています。

これが私が通常行う方法です：

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        <!-- Navigation -->
    </div>
    <div id="content" style="float:left;width:750px;">
        <!-- Content -->
    </div>
</div>

#containerを別のdivでラップし、ヘッダーdivを#containerの兄弟として埋め込み、マージンと幅のスタイルを親コンテナーに移動することで、このデザインにヘッダーを簡単に追加できます。また、CSSは別のファイルに移動し、インライン化しないでください。など。最後に、clearfixクラスはpositioniseverythingにあります。