div内のdivの最小高さをパーセンテージの高さに設定するにはどうすればよいですか？

Question

divはmin-height=100;で、divが内部にあります。

divにはheight=80%;を使用しますが、動作しません。 HTMLとCSSのセクションを確認してください：私は外divためheightの代わりmin-heightを使用する場合

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を使用することはできませんので、インナーdivのコンテンツの高さ固定されていません。バイオリン弾きのために

：（100％以上の高さを持っている3D外側のdivを更新） jsfiddle：

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

おかげ

Answer 1

問題は、一部のjQueryコードで解決されています。

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

CSS：

fixedheight{ 
    height:100%; 
} 

今私の外div'sのすべてがmin-height=100%;と場合は、それらの1つ（または複数）を持つことになりますが、内側divを持って、外divは、高さが固定されています。

Answer 2

ちょうどheight: 80%を使用しています。結局のところ、min-heightを100％に設定しています。これは最大高さです。だから、やや意味がないようです。また、divに幅を与える必要があります。

Answer 3

min-heightで苦労するのではなく、padding-bottomで遊ぶ方が良いですか？

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; 
}