2016-12-03 10 views
3

コンテナdivがmin-heightプロパティをパーセントで設定すると、heightとmin-heightは内部divのパーセンテージでは機能しなくなるようです。両方ともパーセントである場合、ネストされた最小高さが動作しない

のコードは以下の通りです...(すべてが働い予想通り):

  html,body{ 
 
     height:100%; 
 
     background:black; 
 
     } 
 
     .container{ 
 
     height: 30%; 
 
     background-color: green; 
 
     } 
 
     p{ 
 
     min-height:90%; 
 
     background-color:purple; 
 

 
     }
<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
     
 
     </head> 
 
    <body> 
 
    <div class="container"> 
 
     <p>The minimum height of this paragraph is set with percentage</p> 
 
    </div> 
 

 
    </body> 
 
    </html>

私は分の高さの割合にコンテナのdivを設定すると、紫色の段落がダウンして縮小します。私は段落が含まれているdivの90%を維持することを期待していました。この非稼働バージョンとの唯一の違いは、コンテナdivの「高さ」を「最小高さ」に設定していることです。

  html,body{ 
 
     height:100%; 
 
     background:black; 
 
     } 
 
     .container{ 
 
     min-height: 30%; /* LINE CHANGED */ 
 
     background-color: green; 
 
     } 
 
     p{ 
 
     min-height:90%; 
 
     background-color:purple; 
 

 
     }
<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
     
 
     </head> 
 
    <body> 
 
    <div class="container"> 
 
     <p>The minimum height of this paragraph is set with percentage</p> 
 
    </div> 
 

 
    </body> 
 
    </html>

何が起こっているかに任意のヘルプや洞察力をいただければ幸いです。私は本当にこれができるようにしたい:これは、より複雑なデザインの一部です。私はちょうど質問の基本にそれをぬぐいました...

+0

...これは予想される動作ですが、結果はあなたが残念ながら期待していたものではありません。 – scooterlord

答えて

1

現在、我々はそれらの多くが直面している同じ問題があります

https://bugs.webkit.org/show_bug.cgi?id=26559

body,html tag height 100% = 662 
container div height is 30% of 100 = 0.3 * 662 = 198 
p tag is taking 30% * 30% of container class which is 0.3 * 0.3 * 198 =18. 

もオープンバグを持っている私の提案は、私は、これは便利

であると思います

position: relative to .container class 
position: absolute to p tag 

を置くことです

+0

pタグの興味深い計算。 「30%* 30%」はどこから来たのですか? – dars

関連する問題