Why does one div height change in px but not in percent? - html

Question

Just practicing around with div positioning. In this code, the green colored child div (the last fourth one from left), whenever I try to increase/decrease its height in %, there is no effect. However, when I try to increase/decrease its height in pixels the div expands/contracts accordingly. Why is that? I am talking about .child4 { }
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
}
.parent {
background-color: rgba(0,0,0,1);
height: 100%;
width: 100%;
position: absolute;
}
.child1 {
background-color: rgba(153,153,153,1);
height: 200%;
width: 25%;
margin-right: 2%;
margin-left: 0%;
display: block;
/* [disabled]margin-bottom: 2%; */
float: left;
position: relative;
}
.child2 {
background-color: rgba(255,0,0,1);
height: auto;
width: 25%;
margin-left: 0%;
display: block;
float: left;
position: relative;
top: 0%;
margin-top: 0%;
}
.child3 {
height: auto;
width: 25%;
background-color: rgba(0,0,255,1);
float: left;
}
.child4 {
height: 50%;
width: 20%;
background-color: rgba(0,255,0,1);
float: left;
position: relative;
top: 0%;
}
----------
<div class="parent">
<div class="child1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis eeeeeeeeeeeeeeeeeeeeeeeee
</div>
<div class="child2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis
</div>
<div class="child3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis
</div>
<div class="child4">
kdkldkldkdkld
</div>
</div>

Answer 1

You set the height to 50% but 50% of what? What value is that? It's always the value of the parent. In this case .parent.
So what is the value of .parent? You have it set to auto which leads to what value in its height for .parent? Zero.
What is 50% of zero?
Get it? Good.
So set .parent to a height of, say, 300px. Then see what you get.

Answer 2

It's not working, because the parent doesn't have any height.
You can't take 25% of auto, but you can take 25% of 700px for example. The parent height should be in px to be able to make the child height in %.
Edit :
Now that you added height 100% to parent, it's looking weird, because it take 100% of the snippet container.

Answer 3

Have you tried setting the width of the .parent to a fixed size e.g. 500px? That way you can make the height a percentage based off of the width. There does need to be some fixed attribute to base the percentage off of. This works the same for width % so if you set a fixed height you can use % on the width

Answer 4

I don't understand very well what you want, but I saw that you need add some fix on your CSS code to show the .parent background because you are using float:left on .child. Maybe this solve your problem. This is the fix code:
.parent:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both !important;
height: 0;
}