Сделать UL унаследовать Div высоту/высоту Div

Question

Я пытаюсь сделать свой тег UL, который находится внутри div, чтобы наследовать высоту div.

Вот мой код:

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; 
    } 

Я хочу, чтобы наследовать высоту от DIV или по крайней мере установить его в% внутри Div

Любая помощь была бы очень полезной!

Answer 1

Поскольку .xyz не имеет определенной высоты, вертикальные проценты в #abc не будет работать.

Но если вы просто хотите, чтобы заполнить #abc.xyz полностью, вы можете использовать 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>

Answer 2

Ваш уль элемент является «идентификатор» и CSS, чтобы отразить это должно быть «#»

.xyz #abc{ ....