How to compute div height

Question

I'm new to css. When I was learning I found something which made me confused.

I know if I not set the height of div,it will decide by what it contains.

Sample code:

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

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

Here Outermost div'height is up-to div.a's height,which is 10px.

But When I set div.a css as { display: inline-block;}

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>

The height changed. It is up to div.a's content event it is overflow.

What's the display: inline-block effect.

the height is 10px; but the content is overflowing the div, just give to `a` tag `overflow:hidden`, — Jishnu V S, Nov 30 '16 at 09:26
what is the problem when you add height directly in to the code? — , Nov 30 '16 at 09:30
if you are confused about the red border that is happened because you set the property `display: inline-block` — , Nov 30 '16 at 09:31
@WhiteMaskers I know that, maybe I didn't describe it clearly.So I upate the question — qslcna, Nov 30 '16 at 09:44
Possible duplicate of [Make a div fill the height of the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — Tom Brennan, Nov 30 '16 at 10:41

score 0 · Accepted Answer · answered Nov 30 '16 at 09:39

I think your issue here is the combination of giving it a specific height and the overflowing content.

I have done some examples here that might help.

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 */
}

How to compute div height

1 Answers1