CSS最小高度，如果容器在百分比最小高度的百分比不會太

Question

我有一個簡單的標記位置：

<div class="fixh"> 

    <div class="outer"> 
     <div class="inner"> 
      inner 
     </div> 

    </div> 

</div> 

我要讓內部塊中有至少100％的高度外塊。如果內容大於100％，則應該溢出。但最小高度的內部塊：100％將不起作用！ 例如： http://jsfiddle.net/mBBJM/5378/

Answer 1

min-height實際上並沒有百分比。使用min-height或min-width樣式時，分別爲（或max-height和max-width爲此事）

.fixh { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: green; 
 
} 
 

 
.outer { 
 
    width: 100%; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    background-color: blue; 
 
} 
 

 
.inner { 
 
    width: 100%; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    background-color: gray; 
 
}

<div class="fixh"> 
 
    <div class="outer"> 
 
     <div class="inner"> 
 
      inner 
 
     </div> 
 
    </div> 
 
</div>

你應該總是指定height和width風格：你會解決這個問題是在運用height:100%這裏。否則CSS不知道它需要改變，所以它不會。

Answer 2

我希望這是你問的。

http://jsfiddle.net/w9Lghbuw/1/

.fixh { 
    width: 300px; 
    height: 300px; 
    background-color: green; 
} 
.outer { 
    width: 100%; 
    min-height: 100%; 
    background-color: blue; 
    height: 100%; 
} 
.inner { 
    color:#fff; 
    width: 100%; 
    height: 100%; 
    line-height: 20px; 
    word-break: break-all; 
    overflow: auto; 
}