tuankhoa1996 tuankhoa1996 - 6 months ago 13
HTML Question

Make div fixed height by percent

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

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>