Make div fixed height by percent [duplicate] - html

Question

This question already has answers here:
How to make a div 100% height of the browser window
(40 answers)
Closed 6 years ago.
I'm creating a div with 100% width of parent and now i want it to be 10% height of parent (no mater how long the content is).
I set height: 10% but it still didn't solve my problem.
Here is my css:
body {
margin: 0px;
padding: 0px;
height: 100%;
}
.header {
display: inline-block;
background-color: #008CDA;
width: 100%;
height: 10%;
margin: 0px auto;
padding: 0px;
}

Answer 1

All his parent must have height: 100%.
usually it looks like this:
html,
body {
height: 100%;
background-color:grey;
}
.wrap {
height: 100%;
background-color:yellow;
}
.your_div {
height: 10%;
background-color:red;
}
<div class="wrap">
<div class="your_div"></div>
</div>

Answer 2

Here's a quick JSfiddle showing a parent-child layed out as you describe:
https://jsfiddle.net/k0jur7yf/
{.child {
height:10%;
width:100%;
background-color: red;
}
Could you show us a snippet of your code if this doesn't solve your problem?

Answer 3

Check it, first make a div and its class parent.
enter image description here
Added the following class in your Css file or in head.
.parent {height:10%; width:100%;}

Answer 4

In div If you use width and height style in % then it will adjust according to content but when you use style in px then it will take according to size of the width and height.
example:
<div style="width:100%;height:10%;border: 3px solid red">FOr example</div>
<div style="width:100px;height:10px:border:3px solid red">