0

So I'm trying to make footer which has min-height: 70px and inside footer theres an address, social media, logo, etc.

The question is why I can't make height for address, social media, logo, etc. 100% ???

Simple CSS

div.min {
    min-height: 100px;
    background-color: red;
}
div.in {
    height: 100%;
    width: 50px;
    background-color: blue;
}

And simple HTML

<div class="min">
    <div class="in">
    </div>
</div>

If I change the min-height into height its working, can anyone help me? Thanks

user5436320
  • 133
  • 2
  • 17
  • 2
    When using percentage heights, the parent must have the `height` property. – Michael Benjamin Jun 15 '17 at 14:42
  • If min-height is set to 100, then it gives it 100% of parent container whatever that may be. When you set `.in` to 100% it takes 100% of it's parent, in this case, `.min` and `.min` takes 100% from the height of its parent – treyBake Jun 15 '17 at 14:42
  • 1
    You can set the height of the parent to 1 px and keep the min-height the same. – Gerard Jun 15 '17 at 14:45
  • Ah I see, so we can't assume min-height is height with flexibility?, and sorry if this question duplicate since I couldn't find the problem with min-height in pixel @Michael_B – user5436320 Jun 15 '17 at 14:45
  • An in-flow element with a percentage height needs a height reference from the parent. Browsers have traditionally used the `height` property for such reference. `min-height` and `max-height` won't work. More details in the duplicates. – Michael Benjamin Jun 15 '17 at 14:48

0 Answers0