爲什麼內部div不會擴展到設定的高度/最小高度？

爲什麼height: 100%在下面的代碼中對#baz沒有影響？如果需要在（某些）祖先元素上有min-height，你怎麼能解決這個問題？爲什麼內部div不會擴展到設定的高度/最小高度？

HTML：

<div id="foo"> 
    <div id="bar"> 
     <div id="baz"> 
      foo bar baz 
     </div> 
    </div> 
</div>

CSS：

div { border: 3px solid red; padding: 5px; } 
#foo { height: 300px; } 
#bar { min-height: 100%; } 
#baz { height: 100%; }

使用Chrome 12和Firefox 4測試

2011-07-27 Qtax

使用下面的一種作品：

#bar { min-height: 100%; position: relative; } 
#baz { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

但有另一種（或更好）的方式？

2011-07-27 01:09:39 Qtax

這似乎忽略你指定的任何利潤。 –

不要當你想使用min-heightheight
最小高度意味着它不能變小。height: 100%意味着100％的父元素的高度（這是沒有指定，所以它默認爲auto我認爲）。

#bar, #baz { height: 100%; box-sizing: border-box; }

box-sizing是讓他們留在彼此。

2011-07-27 00:41:32

不回答問題，也不回答有效的解決方案。酒吧上的「最小高度」工作，但巴斯的「高度：100％」不會。爲什麼是這個問題？正如我所說的：在（某些）祖先元素上的「min-height」是必需的。我認爲「min（imal）」意思是「至少」，因此「min-height」意味着至少指定的高度。 – Qtax

@Qtax啊我看到了變化。但是真正的問題是爲什麼它是必需的？如果真的需要的話，就把「min-height」和「height」放在它上面。它不起作用，因爲沒有設置「高度」。 –

@Qtax我相信'height：100％'看着父'height'（這是未指定的，所以它是'auto'），並且說它必須是內容的高度。 –

回答