0

  1. Why when I set div element height with percentage the element doesn't showing up?

  2. Why max-height never showing up? (No matter if it's percentage or vh or px) ?

For example:

<body> <div></div> </body>

div {width:50%; max-height: 100px; background-color: blue;}. Another Example: div {width: 50%; height:20%; background-color:blue;}

Never showing up :( Thanks for help.

lir
  • 21
  • 4

2 Answers2

0

Even if an element has a max-height attribute, you still need to tell it to consume it, because the default is auto. So if you want it to consume all height up to a maximum height you placed, use:

height: 100%;
max-height: 100px;
Edgar Quintero
  • 4,223
  • 2
  • 34
  • 37
0

This will be because the element outside the div has a height of 0.

In your example body has a height of 0 so any percentage of 0 is still 0.

If you give your body (or outside element) a height it will be seen.

.outerDiv {
  height: 100px;
  border: 1px solid black;
}

.innerDiv {
  height: 50%;
  background-color: lightblue;
}
<div class="outerDiv">
  <div class="innerDiv">
    I'm inside
  </div>
  I'm outside
</div>
Jackson
  • 801
  • 10
  • 22