20

要素にパーセントの高さを使用すると、パーセントはその親のパーセントになることを知っています。子を親の 40% にしたいとします。親には最大高と最小高が割り当てられていますが、明示的な高さは割り当てられていません。例えば：

<div id="container">
  <div id="one">
    <div id="two"></div>
  </div>
</div>

CSS

#container{
  height: 500px;
  background: yellow;
}
#one{
  background: red;
  min-height:100px;
  max-height: 50%;
  padding: 10px;
}
#two{
  background: blue;
  height: 40%;
}

Div 2 は表示されません。彼の親 (div 1) の css をこれから次のように変更すると、 div 2 が表示されmax-height:50%ますheight:50%。これは、明示的に定義されているため、親の高さを知っているためです。(min/max)-height私の質問は、使用中と使用中に div 2 を表示する方法があることです。height

ここにフィドルがあります

4

2 に答える 2

9

これを確認してください。小さなピースが 1 つ欠けています。#container と比較して #one の高さを設定し、#one と比較して #two の高さを設定したいとします (それが目的だと思います)。#two から高さを取得するには、#one の高さステートメントが必要です。ここでのコツは、最大高さ、最小高さ、および高さを要素に設定することです。これにより、最小高と最大高によって制限される高さが要素に与えられます。

このCSSを試してください：

 <style>
 #container{
   height: 74vh;
   background: yellow;
 }
 #one{
   background: red;
   min-height:100px;
   max-height: 50%;
   height: 100%;
   padding: 10px;
 }
 #two{
   background: blue;
   height: 40%;
 }
 </style>

高さは max-height によって制約されているため達成されませんが、高さを宣言しないと、height: auto であり、宣言されていません。#container の高さを 74vh に設定して、ビューポートのサイズに応じて全体が反応するようにしました。

于 2016-03-22T22:29:38.273 に答える