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：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你的ul元素是'id'，而CSS反映的应该是'＃'

.xyz #abc{ ....

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

2 个答案: