How do I maximise CSS height in DIV in jsfiddle?

Question

I have the following HTML and CSS :

<div id="a">
</div>

#a {
  width: 100%;
  height: 700px;
  background-color: orange;
}

jsfiddle :

https://jsfiddle.net/9zwsk6bb/

I would like the height to fill the total height exactly of the outer panel without using something like flexbox. Is it possible in this case?

https://stackoverflow.com/a/31728799/3597276 – Michael Benjamin Jul 03 '17 at 14:47 — Michael Benjamin, Jul 03 '17 at 14:47

score 2 · Answer 1 · answered Jul 03 '17 at 14:18

Sure, but for that, you need to set the parent elements height, because when you want the element's height to be 100% of the parent, then 100% of what? So, you need to have something like

html,
body {
  height: 100%;
}

#a {
  width: 100%;
  height: 100%;
  background-color: orange;
}

<div id="a"></div>

Note that if you have a wrapper element for #a, then you need to set some height for that element as well.

How do I maximise CSS height in DIV in jsfiddle?

1 Answers1