我怎樣才能設置百分比高度div div內的最小高度？

Question

我有一個div與min-height=100;其中div裏面。

現在我想使用height=80%;作爲內部div，但它不起作用。 請檢查HTML和CSS部分：

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
} 
 
.outer{ 
 
    width:100%; 
 
    min-height:100%; 
 
    background-color:gray; 
 
    border:5px solid red; 
 
} 
 
.inner{ 
 
    height:80%; 
 
    background-color:red; 
 
}

<div class="outer"> 
 

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

 
</div> 
 
</div>

它的工作原理，當我用height，而不是min-height爲外div但我不能用height，因爲內div內容的高度不是固定的。

對於弄虛作假： 的jsfiddle（與超過100％的高度3D外層div更新）：

https://jsfiddle.net/mr_seven/d9ubjpe4/9/

感謝

Answer 1

的問題已經解決了一些jQuery的代碼。

$(".inner").parent().addClass('fixedheight'); 

CSS：

fixedheight{ 
    height:100%; 
} 

我的外div's將有min-height=100%;，如果他們（或多個）中的一個具有內div，外div將有固定的高度，現在所有。

Answer 2

只需使用height: 80%。畢竟，你將最小高度設置爲100％，這也是最大高度。所以，這似乎有點毫無意義。此外，你需要給你的div寬度。

Answer 3

與padding-bottom一起玩而不是用min-height掙扎是不是更好？

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
} 
 
.outer{ 
 
    width:100%; 
 
    height: 100%; 
 
    min-height:80%; 
 
    background-color:yellow; 
 
    border:5px solid red; 
 
} 
 
.inner{ 
 
    height:80%; 
 
    background-color:blue; 
 
}

<div class="outer"> 
 

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

Answer 4

這應該爲你工作：

HTML：

body, html { 
    height: 100%; 
} 

.outer { 
    background-color: gray; 
    height: 100%; 
} 

.inner { 
    background-color: red; 
    height: 80%; 
} 

CSS：

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

Answer 5

您是否在尋找這個.. Fiddler

<div class="outer"> 

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

</div> 
</div> 

CSS

html,body{ 
    width:100%; 
    height:100%; 
} 
.outer{ 
    width:100%; 
    height:100%; 
    min-height:100%; 
    background-color:gray; 
    border:5px solid red; 
    display: table; 
} 
.inner{ 
    height:80%; 
    background-color:red; 
}