Setting the height as % of its parent with height: auto

Question

I wrote this codepen that does not work.

HTML

<div class="a"> 
<div class="b">  variable content length  variable content length  variable content length  variable content length  variable content length  variable content length  variable content length 
  <div class="c"> </div>
  </div>
</div>

CSS

.a{
  height: 500px;
  width: 70px;

}

.c{
  height: 50%;
  background-color: red;
  display: inline-block;
}

a is just a container b is the content div with variable content size.

is there a way to do it? c can have whatever position as well. But: .c must be half the size of its variable parent

Your question is a little vague and I don't understand what you want to do. This is a simple html and css and whatever you want is possible to do. — Franco, Dec 10 '15 at 22:12
So `.a` must be `500px` tall, and `.c` must be half `.b`. But how tall should `.b` be? — Oriol, Dec 10 '15 at 22:35
@Oriol `b` is variable. Soemtimes really tall, sometimes really short — Toskan, Dec 10 '15 at 23:03
@Franco i'll rewrite the question slighty. The question is: how can I make `c` half the size of its variable content sized parent. — Toskan, Dec 10 '15 at 23:04

David · Answer 1 · 2015-12-11T08:03:18.773

0

Give a height to b too :

.b {
   height: 100%;
}

To set the height of an element in %, its parent must have a height property too (in px or in % (same rule in case it's %)).

If the height is dynamic, set the overflow property of the a-element to auto.

edited Dec 11 '15 at 08:03

answered Dec 10 '15 at 22:10

David

4,785
7
39
63

If the height is dynamic, set the overflow property of the a-element to auto. – David Dec 10 '15 at 22:18
You may wish to move your comments explaining your answer, to the answer. Current this answer has been flagged (not by me) as low quality. – Heretic Monkey Dec 10 '15 at 23:09

score 0 · Answer 2 · answered Dec 11 '15 at 00:19

Here's a working solution. Notice I changed some of the colors for clarity, sorry about that.

http://codepen.io/anon/pen/WrvLJv

.a{
  height: 500px;
  width: 70px;
  background:blue;
  overflow-y:hidden;
}

.b{
  width:100%;
  background:grey;
  position:relative;
}

.c{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height: 50%;
  background-color: red;
  display: inline-block;
  z-index:99999;
}

Changes introduced:

1. Added position:relative to .b and position:absolute to .c, while positioning .c on the top left corner.

2. Added a width and height of, respectively, 100% and 50% to .c.

If i recall correctly, the rest is just for demonstrative purposes. Hope I understood your question and helped. By the way, try adding more content to the text, see if it works for you.

Setting the height as % of its parent with height: auto

2 Answers2