CSS height inheritance, skipping generations

Question

In CSS, the height property of an element X can be set to the same height as X's parent using either height: 100% or height: inherit. That only works if X's parent has its height specified.

Is there a way to make an element inherit height from its nearest ancestor that has a specified height?

So that in a situation like this:

index.html

<div class="A">
    <div class="B">
        <div class="C">
            Content
        </div>
    </div>
</div>

index.css

.A {
    height: 200px;
}

.C {
    height: 100%;
}

C would get its height (200px) from A, even though B is in between them in the hierarchy. And you can imagine a situation in which there is much more nesting than in this example, where it's a hassle to add height: 100% to every intermediate element.

Is there any reason why you can't just set the fixed height on .C, expanding .A as a result? Most of the time when I run into this problem, it's because my HTML is poorly structured (unnecessary wrappers, etc.). I'm curious about the specifics of your situation — Noah, Jun 06 '16 at 05:49

score 2 · Answer 1 · edited May 23 '17 at 11:52

Utilize a CSS selector. Create a div wrapper (or make .A your wrapper div) and do .wrapper div {height: 100%;}. This applies styles to any element you specify under your wrapper div.

Source: css all divs vs direct child divs

.A {
    height: 60px;
    border:solid 1px black;
}
.B {
  height:inherit;
  background-color: blue;
}

.C {
    height: 100%;
    border:solid 1px blue;
}

.D {
  height: 30px;
  background-color: green;
  border: 1px solid white;
}

.E {
  padding: 10px;
}

.wrapper div {
  height: 100%;
  background-color: red;
  border: 0px;
}

<div class="wrapper">

<div class="A">
    <div class="B">
        <div class="C">
            <div class="D">
                <div class="E">
                    Content                
                </div>        
            </div>
        </div>
    </div>
</div>

</div>

Has the original asker had chance to review these answers? – TimesWasting Jul 05 '16 at 01:46 — TimesWasting, Jul 05 '16 at 01:46

score 0 · Answer 2 · answered Jun 06 '16 at 04:28

0

div C get height from B and B get it from A. if B is inherit. add this to class B:

height:inherit;

I mark divs with color, comment it to see what i've done.

https://jsfiddle.net/0saut255/1/

answered Jun 06 '16 at 04:28

Farhad

4,119
8
43
66

I noted this solution in my question. My point is that if there were more nesting, so more layers between A and C, then it would be bad to have to put `height: inherit` on all of them individually. So I'm asking for a way to "skip" all the in-between `height: inherit`'s and just inherit from the nearest ancestor. – tscizzle Jun 06 '16 at 04:32

score 0 · Answer 3 · answered Jun 06 '16 at 04:31

You could create one master class to hold the 100% height rule and then add it to all of your div in the chain. this does only displace the problem to the HTML instead of the CSS but it would pass the 100% height to all of the children

.A {
height: 200px;
}
.fullHeight {
height: 100%;
}

Then in your HTML

<div class="A">
  <div class="B fullHeight">
    <div class="C fullHeight">
        Content
    </div>
  </div>
</div>

Bottom line is that no matter what method you choose you will have to tag each layer with some indicator that it should be looking at the element above for the height.

Right, a good thought (something I considered, but still trying to avoid having to do something at each layer individually). — tscizzle, Jun 06 '16 at 04:33

score 0 · Answer 4 · answered Jun 06 '16 at 04:51

you can add .A div{ height: 100%; } on your CSS, then if need you need to adjust the height of B use !important. e.g: .B{ height: 150px !important; }

.A{ height: 300px; }
.A div{ height: 100%; }
.B{ width: 500px; height: 200px !important; }
.C{ width: 100px; }

<div class="A">
    <div class="B">
        <div class="C">
            Content
        </div>
    </div>
</div>

CSS height inheritance, skipping generations

4 Answers4