高さが高さでは、隣接するdivを同じ高さに縮小する理由を教えてください。

Question

私は垂直の棒グラフと同じように、異なる高さの隣接するdiv'sを作ろうとしています。問題は、pxでdivの高さを指定すると、の高さはokですが、別のパーセンテージで高さを指定すると、隣接するすべての高さは同じ高さに収縮します。私はコンテナdivとバーdiv'sに最小高さを指定しましたが、それでも動作しません。ここに私のコードは次のとおりです。

HTML

<div class="barcontainer"> 
<div id="firstbar" class="bar" style= "height:10%"> 
&nbsp; 
</div> 
<div id="secondbar" class="bar" style= "height:80%"> 
&nbsp; 
</div> 
<div id="thirdbar" class="bar" style= "height:50%"> 
&nbsp; 
</div> 
<div id="fourthbar" class="bar" style= "height:30%"> 
&nbsp; 
</div> 
</div> 

CSS

barscontainer 
{ 
    min-height: 300px; 
} 
.bar{ 
    background: none repeat scroll 0 0 #7EADCB; 
    border-bottom: medium none; 
    float: left; 
    display: inline-block; 
    margin: 1px; 
    vertical-align: top; 
    width: 16px; 
    min-height: 1px 
    z-index: 1; 
} 

私が間違って何をやっている私を導いてください。ありがとう。私が見ることができる

Answer 1

いくつかのこと：

1. クラスセレクタが正しくありません：.barcontainerでなければなりません。
2. barcontainerクラスのmin-height属性が、長さ値（300pxまたは30emなど）のheightに設定されている場合、バーは正しい長さです。問題は空のコンテンツだと思う。
3. 改行されていないスペースは、何かに囲まれている必要があります（pタグが行います）。
4. インラインスタイルを使用できますが、IDセレクタを使用してCSSに適用することができます。

これらの変更を示すlinkです。私は、ピクセル密度のためにMacBook Pro Retinaでこれを実行すると、300pxが特に高くはないことに気付きました。

これを行う別の方法は、必要に応じてSVGを使用することです。私はこれを使って、このような2つのことに良い効果をもたらしました。棒グラフを作成する方法のいくつかの例がありますhere。期待通りのパーセンテージは、今動作します - barcontainer高さはあなたでない限りclearフロート数ピクセルで、あなたbarcontainerのための高さを設定しますよう

Answer 2

div sが縮小します。乾杯！

.barcontainer{ 
 
    height: 300px; 
 
    } 
 
.barcontainer:after { 
 
    content:''; 
 
    display: block; 
 
    clear: both; 
 
} 
 
.bar { 
 
    background: none repeat scroll 0 0 #7EADCB; 
 
    border-bottom: medium none; 
 
    float: left; 
 
    display: inline-block; 
 
    margin: 1px; 
 
    vertical-align: top; 
 
    width: 16px; 
 
    min-height: 1px; 
 
    z-index: 1; 
 
}

<div class="barcontainer"> 
 
    <div id="firstbar" class="bar" style="height:10%"> 
 
    &nbsp; 
 
    </div> 
 
    <div id="secondbar" class="bar" style="height:80%"> 
 
    &nbsp; 
 
    </div> 
 
    <div id="thirdbar" class="bar" style="height:50%"> 
 
    &nbsp; 
 
    </div> 
 
    <div id="fourthbar" class="bar" style="height:30%"> 
 
    &nbsp; 
 
    </div> 
 
</div>

UPDATE：

@Martinのコメントは私が考えていました。そして、ここで、あなたがmin-heightを指定し、割合の高さを与えるとき、子供たちはそれらを尊重しないことをなぜ起こるか、別のthread（@JohanKarlssonのおかげで）で、私が探していたSO自体で：

高さ CSS propertyは言います：

パーセンテージ

パーセンテージは 生成ボックスの包含ブロックの高さに対して計算されます。 ブロック ブロックの高さが明示的に指定されていない場合（つまり、内容が の高さに依存する）、この要素が絶対的に配置されていない場合、値 はautoに計算されます。ルートエレメントのパーセンテージの高さは、最初の包含ブロックに対する相対的な です。

（私はまだいくつかの疑問を持っているが）だから、ここでは、親の高さ属性が指定された明示的ないが、そのため値が自動に計算していることのように見える - min-heightオーバーライドheightが、 heightはまだであり、明示的にはが指定されていません。