Oliver Watkins
Oliver Watkins

Reputation: 13499

How do I maximise CSS height in DIV in jsfiddle?

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?

Upvotes: 1

Views: 54

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157314

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.

Upvotes: 2

Related Questions