CSS - Make Div's Inherit a Height

CSS - make div's inherit a height

As already mentioned this can't be done with floats, they can't inherit heights, they're unaware of their siblings so for example the side two floats don't know the height of the centre content, so they can't inherit from anything.

Usually inherited height has to come from either an element which has an explicit height or if height: 100%; has been passed down through the display tree to it.. The only thing I'm aware of that passes on height which hasn't come from top of the "tree" is an absolutely positioned element - so you could for example absolutely position all the top right bottom left sides and corners (you know the height and width of the corners anyway) And as you seem to know the widths (of left/right borders) and heights of top/bottom) borders, and the widths of the top/bottom centers, are easy at 100% - the only thing that needs calculating is the height of the right/left sides if the content grows -

This you can do, even without using all four positioning co-ordinates which IE6 /7 doesn't support

I've put up an example based on what you gave, it does rely on a fixed width (your frame), but I think it could work with a flexible width too? the uses of this could be cool for those fancy image borders we can't get support for until multiple background images or image borders become fully available.. who knows, I was playing, so just sticking it out there!

proof of concept example is here

Inherit height of parent doesn't work

in order for divs to be 100% of the height of their parent, the parent has to have a defined height.

the browser can't calculate 100%(or inherit) of something that hasn't been fully rendered yet.

Inherit height from one div to another

When you provide height to any div (here, it is div.content) in Percent, it is always in relation to parent of that div, and again, I believe parent of content div doesn't have any height given at all.

So giving height:inherit on div.information won't work as you'd expect, i.e. class information to have same height as class content, instead div.information, as given height: inherit, will have 50% height of div.content.

But if you provide div.content height in fixed units (Percent is relative unit) like in Pixels, your div.information will have exact same height as div.content (inherit, so to speak).

Here's the fiddle.

CSS height: 100% vs height: inherit

height: 100% will match the height of the element's parent, regardless of the parent's height value.

height: inherit will, as the name implies, inherit the value from it's parent. If the parent's value is height: 50%, then the child will also be 50% of the height of it's parent. If the parent's size is defined in absolute values (e.g. height: 50px), then height: inherit and height: 100% will have the same behaviour for the child.

HTML - Make div parent inherit div child height

Do you need the child to be positioned absolutely for some reason?
This is why it doesn't 'fit' in your parent element.

According to the documentation

Position absolute:
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.

View the illustrations at https://developer.mozilla.org/en-US/docs/Web/CSS/position to see what exactly happens.

Does a child div inherit parent's height?

A child element does not inherit the height of its parent.

Reference: MDN

You can however set its value to height:inherit; CodePen Example

You could also use height: 100% or max-height: 100%

In any situation you have to think what you want to do with the content if it is too much to fit in that set height: overflow: hidden; overflow-y:hidden; overflow-y: scroll.

Can I make my div inherit height and position from one div and width from another?

It's possible to force a div to fill the whole viewport width using vw. It's a bit weird though:

body,html {    margin: 0;    padding: 0;}
.outer {    width: 300px;    height: 300px;    background-color: #eeeeee;    margin: 0 auto;    position: relative}
.inner {    width: 100vw;    height: 100%;    background-color: rgba(0, 0, 0, 0.1);    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);}

<div class="outer">    <div class="inner"></div></div>

Inherit height from auto height div

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>

---

Related Topics