Multiple 100% height blocks in HTML

Question

I understand that in order to use a percentage based height, the parent element must be set to a fixed height? eg 500px.

I am building a grid in which there is a hierarchy of divs. The parent is a fixed height of 500px, and the children are percentage heights, each 33.333%. These children then have a set of children, each which I want to give a percentage height of 100% of it's parent.

Any one know a way around this?

I don't understand, where's the problem? Check [here](https://jsfiddle.net/9pagr9um/), I've used only percentage dimensions. — pol, Feb 18 '17 at 23:59

score 0 · Answer 1 · answered Feb 18 '17 at 23:50

Any one know a way around this?

An alternative method is to use flexbox with flex-grow so that children grow to fill their parent

* {margin:0;}
section {
  height: 100vh;
}
section,div {
  display: flex;
  flex-direction: column;
}
div,p {
  flex-grow: 1;
  flex-basis: 0;
}
p {
  background: #eee;
}
div:nth-child(even) p {
  background: #ccc;
}

<section>
  <div>
    <p>text</p>
  </div>
  <div>
    <p>text</p>
  </div>
  <div>
    <p>text</p>
  </div>
</section>

Multiple 100% height blocks in HTML

1 Answers1