CSS高度（裏面絕對定位的元素）

我使用的是從這個「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？看起來如果我能以某種方式從#main得到#inner的高度，我可以讓所有的孩子繼承這個高度......但是由於絕對定位，我無法弄清楚如何做到這一點。

任何幫助，將不勝感激。

來源

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;'，我想提的是 –

大回答，謝謝！但有一個問題：如果我有'#myApp #inner＃someDiv'，應該'＃someDiv'是否繼承'height：100％'？它似乎沒有這樣做，如果我不得不向世界末日的所有孩子拋出「身高：100％」。但是，如果你知道如何讓「高度」繼承，那將非常方便。 – machineghost

@machineghost你有CSS值'inherit'。另外，在內部元素上使用'position'（'relative''）會有所幫助。 –

CSS高度（裏面絕對定位的元素）

回答

相關問題