CODEWITHSUNDEEP
htmlcss
Daan
Daan

Reputation: 2799

Inherit height from auto height div

For some reason the inside div doesn't get the same height as the div where it is inside, even though the height is inherited from it. How to give this div (insidediv) the same height as the parent's div?

HTML:

<div id="container">
    <p>Some text</p>
    <p>Some text</p>
    <div id="insidediv"></div>
</div>

CSS:

#container {
    height:auto;
    border:1px solid black;
}

#insidediv {
    border:1px solid red;
    height:inherit;
}

JSFiddle Demo

Upvotes: 4

Views: 7191

Answers (1)

web-tiki
web-tiki

Reputation: 103810

The property height:inherit; will make the child have the same height value as the parent. In your case auto which means it adapts to its content. As #insidediv has no content , it's height is 0.

If you want #insidediv to have the same height as it's parent (this means it should overlay the content of the parent) you can do this : 

#container {
  height: auto;
  border: 1px solid black;
  position: relative;
  z-index: 1;
}
#insidediv {
  border: 1px solid red;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}
<div id="container">
  <p>Some text</p>
  <p>Some text</p>
  <div id="insidediv"></div>
</div>

Upvotes: 7

Related Questions