javascript - 使 UL 继承 Div 的最小高度/高度

Question

我正在尝试让位于 div 内的 UL 标签继承 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>