Css relative responsive height

Question

#parent {
  position: fixed;
  width: 600px;
  height: 300px;
  background: red;
}

#child {
  position: relative;
  width: 200px;
  margin-bottom: 10px;
  margin-top: 10px;
  height: auto;
  background: blue;
}

<div id="parent">
  <div id="child"></div>
</div>

I want to have the child to have the height of the parent minus the margins. Why is the height 0px?

JSFiddle

Answer 1

height: auto is just "automatically as large as it should be for the content it contains." If you want to explicitly make it the height minus the margins, you can set height: calc(100% - 20px);:

#parent {
  position: fixed;
  width: 600px;
  height: 300px;
  background: red;
}

#child {
  position: relative;
  width: 200px;
  margin-bottom: 10px;
  margin-top: 10px;
  height: calc(100% - 20px);
  background: blue;
}

<div id="parent">
  <div id="child"></div>
</div>