CSSの高さ（インサイド絶対配置された要素）

私はSO答えるこのことから、「100％のページの高さ」パターンを使用しています：CSSの高さ（インサイド絶対配置された要素）

：つまり

を、私は基本的なDOM構造を持っています

<hmtml> // has min-height: 100% and position: absolute 
<body> // has height: 100% 
    <div id="myApp"> // has // has position:absolute/top: 0/bottom:0 
     <div id="inner"> // has no styles (or height: 100%; same difference)

すべてがhtml/body/#myAppで素晴らしい作品：彼らはすべて100％のページの高さを持っています。私の問題はdiv#innerです：親の高さまでは成長しません（たとえ私がheight: 100%と言っても）。

これは、#myAppが絶対的に配置されているため、#innerが継承する高さがないため、これが起こっていると思います。すべてのネストされた要素にposition: absolute; top: 0; bottom:0を追加せずにこれを修正する方法はありますか？どういうわけか#innerが#mainからその高さを取ることができるかのように思えますが、私はすべての子供たちにその高さを継承させることができます...しかし、絶対的な位置付けのために、

ご協力いただければ幸いです。

出典

2016-07-28 machineghost

html, body{ height:100%; margin:0; } 
 

 
#myApp{ 
 
    position:absolute; 
 
    top:0; bottom:0; left:0; right:0; 
 
    background:red; 
 
} 
 

 
#inner{ 
 
    height:100%; 
 
    background:gold; 
 
}

<div id="myApp"> 
 
    <div id="inner"> 
 
    Inner should be gold and it is! 
 
    </div> 
 
</div>

出典

2016-07-28 19:54:21

いや、あなたは '高さにhtmlと体を設定してなかった実際の修正：100％;マージン：0;'、私は、おかげでその –

グレート答えに言及う！しかし、1つの質問： '#myApp #inner＃someDiv'があれば、'＃someDiv'は 'height：100％'を継承するべきですか？そうしているようではなく、世界の終わりではないすべての子供たちに '身長：100％ 'を投げなければならない場合はそうです。しかし、もしもあなたが「高さ」を継承することを知っていれば、それはとても便利です。 – machineghost

@ machinghostあなたはCSS値 'inherit'を持っています。また、内側の要素に 'position'（' relative'すなわち 'relative'）を使うと助けになります。 –

CSSの高さ（インサイド絶対配置された要素）

答えて

関連する問題