Make a UL inherit Div's min-height/height

Question

I am trying to make my UL tag which is inside a div to inherit the height of the div.

Here is my code:

HTML:

  <div class="xyz">
       <ul id="abc">
           <li><a href="#">Reviews</a></li>
           <li><a href="#">Opinions</a></li>
           <li><a href="#">About</a></li>
       </ul>
  </div>

CSS:

    .xyz {
           min-height: 85%;
     }

    .xyz #abc{
          min-height: inherit;
     }

I want to inherit the height from the div or at least set it in % inside the Div

Any help would be very helpful!

the `ul` element has an id of "abc", not a class. should be `.xyz #abc` selector — hackerrdave, Dec 06 '16 at 01:25
Sorry... thats what it is... I made a mistake while typing out my code here — rashmeePrakash, Dec 06 '16 at 01:26
CSS heights will not work on elements that are in the normal flow of the document unless each and every parent element has its height set as well. — Scott Marcus, Dec 06 '16 at 01:31
@ScottMarcusI am making a parallax webpage. So this parallax page has a min-height of 100% inside which I have a div which contains 2 divs. The one with the class = "xyz" is set to 85% and I want the UL (id="abc") to also have a particular height in % because if I set it in px then the size of it is differing depending on the size of the — rashmeePrakash, Dec 06 '16 at 01:38
@rashmeePrakash You want `#abc` to be at least 85% of `.xyz`? Or you want `#abc` to be exactly as tall as `.xyz`? — Oriol, Dec 06 '16 at 01:39
@rashmeePrakash I appreciate the explanation, but that doesn't change the facts of my comment. — Scott Marcus, Dec 06 '16 at 14:28

score 1 · Accepted Answer · answered Dec 06 '16 at 01:47

Since .xyz does not have a definite height, vertical percentages in #abc won't work.

But if you just want #abc to fill .xyz completely, you can use flexbox:

.xyz {
  min-height: 85%;
  display: flex;
  flex-direction: column;
}
.xyz #abc {
  flex-grow: 1; /* Grow to fill available space */
}
/* Non-relevant styles: */
.xyz {
  position: absolute;
  top: 0; left: 0; right: 0;
  border: 10px solid blue;
}
.xyz #abc {
  border: 10px solid red;
  width: 50%;
  margin: 0;
}

<div class="xyz">
  <ul id="abc">
    <li><a href="#">Reviews</a></li>
    <li><a href="#">Opinions</a></li>
    <li><a href="#">About</a></li>
  </ul>
</div>

@rashmeePrakash Note that Flexbox won't work in IE10 and below. — Scott Marcus, Dec 06 '16 at 14:30

score 0 · Answer 2 · answered Dec 06 '16 at 01:25

0

Your ul element is an 'id' and the CSS to reflect that should be a '#'

.xyz #abc{ ....

answered Dec 06 '16 at 01:25

MomasVII

4,641
5
35
52

Sorry... thats what it is... I made a mistake while typing out my code here – rashmeePrakash Dec 06 '16 at 01:26
Ok, what is your div wrapped in? 85% height of what exactly? – MomasVII Dec 06 '16 at 01:27
I am making a parallax webpage. So this parallax page has a min-height of 100% inside which I have a div which contains 2 divs. The one with the class = "xyz" is set to 85% and I want the UL (id="abc") to also have a particular height in % because if I set it in px then the size of it is differing depending on the size of the screen. – rashmeePrakash Dec 06 '16 at 01:32

Make a UL inherit Div's min-height/height

2 Answers2