divの高さを計算するには

Question

私はCSSを初めて使っています。私が学んだとき、私は私を混乱させた何かを見つけました。

divの高さを設定しないと、それに含まれるものによって決定されます。

サンプルコード：

div { 
 
    border: solid red; 
 
} 
 
div.a { 
 
    border: solid green; 
 
    height: 10px; 
 
}

<div> 
 
    <div class="a"> 
 
    123<br/> 
 
    123<br/> 
 
    123<br/> 
 
    </div> 
 
</div>

ここでは最も外側のdiv'heightはアップに10pxのあるdiv.aの高さ、です。

しかし、私はdiv.a CSSを設定すると、高さが変化

div { 
 
    border: solid red; 
 
} 
 
div.a { 
 
    border: solid green; 
 
    height: 10px; 
 
    display: inline-block 
 
}

<div> 
 
    <div class="a"> 
 
    123<br/> 
 
    123<br/> 
 
    123<br/> 
 
    </div> 
 
</div>

{display: inline-blockを}。 div.aのオーバーフローしたコンテンツイベントまでです。

display: inline-blockとはなんですか？

Answer 1

あなたの問題は、特定の高さとあふれる内容を組み合わせることです。

私はここで役立ついくつかの例を行っています。

DEMO https://jsfiddle.net/r6n12325/：

HTML：

<div class="box1"> 
    <div class="box2"> 
    123<br> 
    123<br> 
    123<br>  
    </div> 
</div> 

<hr> 

<div class="box3"> 
    <div class="box4"> 
    123<br> 
    123<br> 
    123<br>  
    </div> 
</div> 

<hr> 

<div class="box5"> 
    <div class="box6"> 
    123<br> 
    123<br> 
    123<br>  
    </div> 
</div> 

CSS：

.box1 { 
    border:1px solid #333; 
} 
.box2 { 
    border:1px solid red; 
} 

.box3 { 
    border:1px solid #333; 
} 
.box4 { 
    height: 10px; 
    display:inline-block; 
    border:1px solid red; 
} 

.box5 { 
    border:1px solid #333; 
} 
.box6 { 
    height: 10px; 
    display:inline-block; 
    border:1px solid red; 
    overflow:auto; /* could also use hidden */ 
}