web-dev-qa-db-ja.com

どのように親の浮遊div 100％の高さを作るには？

これがHTMLです。

<div id="outer">
    <div id="inner"></div>
    Test
</div>

そしてこれがCSSです。

#inner {
  float: left;
  height: 100%;
}

Chrome開発者ツールで調べたところ、内側のdivの高さは0pxになりました。

どうすればそれを親divの高さの100％にすることができますか？

csshtmlheight
245
Nathan Osman

#outer heightがコンテンツに基づいており、#innerがその高さに基づいているようにするには、両方の要素を絶対に配置します。

詳細は css heightプロパティ の仕様に記載されていますが、本質的に、#innerの高さがautoの場合、#outerは#outer heightを無視する必要がありますunless#outerは絶対に配置されます。その後、#innerの高さは0になります、unless#inner自体は絶対に配置されます。

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

ただし... #innerを絶対に配置すると、float設定は無視されるため、#innerの幅を明示的に選択し、#outerにパディングを追加して、必要なテキストラッピングを偽造する必要があります。たとえば、以下の#outerのパディングは、#inner +3の幅です。都合の良いことに（全体のポイントは#innerの高さを100％にすることでした）、#innerの下にテキストをラップする必要がないため、これは#innerがフロートしているように見えます。

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

あなたの目標に関する間違った仮定が多すぎるため、以前の回答を削除しました。

125
Chadwick

親のために：

display: flex;

あなたはいくつかのプレフィックスを追加する必要があります http://css-tricks.com/using-flexbox/

編集：唯一の欠点はIEで、いつものように、IE9はflexをサポートしていません。 http://caniuse.com/flexbox

編集2：@toddsbyが述べたように、align項目は親のためのものであり、そのデフォルト値は実際にはstretchです。あなたが子供のために異なる値が欲しいならば、align-selfプロパティがあります。

編集3：jsFiddle： https://jsfiddle.net/bv71tms5/2/

113
Aiphee

実際には、親要素が配置されている限り、子の高さを100％に設定できます。つまり、親を絶対的な位置に配置したくない場合です。さらに説明しましょう。

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2 {
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
</div>
75
Nathaniel Schweinberg

IE 8より前のバージョンのInternet Explorerをサポートする必要がない限り、display: table-cellを使用してこれを実現できます。

HTML：

<div class="outer">
    <div class="inner">
        <p>Menu or Whatever</p>
    </div>
    <div class="inner">
        <p>Page contents...</p>
    </div>
</div>

CSS：

.inner {
    display: table-cell;
}

これは.innerクラスを持つ各要素がその親要素の全高を占めるように強制します。

22
Nathan Osman

私はあなたの問題を解決する 例 を作りました。

あなたはラッパーを作り、それをフロートさせ、そしてあなたのdivを絶対位置に置き、それに100％の高さを与えなければなりません。

HTML

<div class="container">
    <div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
  <div class="right-wrapper">
    <div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

CSS：

.container {
    width: 100%;
    position:relative;
}
.left {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.6);
    float: left;
}
.right-wrapper {
    width: 48%;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
}

説明：.right divは絶対位置です。つまり、widthまたはheightプロパティがCSSで明示的に宣言されている場合は、その幅と高さ、および左上の位置と左端の位置は、最初の親divの絶対位置または相対位置に基づいてのみ計算されます。明示的に宣言されていない場合、これらのプロパティは親コンテナ（.right-wrapper）に基づいて計算されます。

したがって、DIVの100％の高さは.containerの最終的な高さに基づいて計算され、.rightの位置の最終的な位置は親コンテナに基づいて計算されます。

15
Mandarinazul

ここでそれを達成するためのより簡単な方法です：

  1. 3つの要素のコンテナ（#outer）表示を設定します。table
  2. そして、要素自体を設定します（#inner）display：table-cell
  3. フローティングを外します。
  4. 成功。
#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

@Itayのおかげで 浮動div、100％の高さ

15
leopinzon

ちょっとしたjQueryを使う準備ができていれば、答えは簡単です。

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

これは単一の要素をその親の100％の高さを持つ側に浮遊させるのによく働きますが、通常ラップアラウンドする他の浮遊要素は片側に保持されます。

これが仲間のjQueryファンに役立つことを願っています。

9
Obi-Dan

これは、同じ高さのグリッドシステムのコードサンプルです。

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

上記はouter divのCSSです

#inner{
width: 20%;
float: left;
border: 1px solid;
}

上記は内側のdivです

これがお役に立てば幸いです

3
Biswajit

これは私を助けました。

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

適切な＃inner幅を設定するには、right：とleft：を変更します。

1
sevenkey

同じ高さの子要素が複数必要な場合の同様のケースは、flexboxで解決できます。

https://css-tricks.com/using-flexbox/

親にdisplay: flex;、子要素にflex: 1;を設定すると、それらはすべて同じ高さになります。

0
romaroma