跨越父按钮的 100% 高度

Question

我有以下标记

<button class="filter"><div class="radio"><div class="circle"></div></div> <span>Account Management</span></button>

和CSS

.filter {
    font-size: 3vw;
    text-align: left;
    line-height: 1.6;
    padding: 0px;
    display: block;
    height:auto;
    overflow: hidden;
    margin-bottom: 3px;
}
.filter span {
    background: $leithyellow;
    height: 100%;
    overflow:auto;
    display: block;
    width: calc(100% - 60px);
    float: left;
    margin-left:10px;
    padding-left:20px;
}

我无法将跨度扩展到按钮的 100% 高度。这能做到吗？

Answer 1

仅当为祖先正确定义了身高时，身高才适用。如果你想让高度起作用，那是一个棘手的问题。您可以使用我的最爱之一，但您需要确保它适用于所有情况：

将 position: relative; 交给 parent。
给需要完整height和width的元素position: absolute;。
给元素所有边的 0 个值。

片段

.parent {
  position: relative;
  width: 100px;
  height: 50px;
  background: red;
}
.parent .child {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: skyblue;
}

<div class="parent">
  <span class="child"></span>
</div>

在上面的代码片段中，注意到这也可以工作，如果你给出：

.parent {
  position: relative;
  width: 100px;
  height: 50px;
  background: red;
}
.parent .child {
  position: absolute;
  width: 100%;
  height: 100%;
  background: skyblue;
}

<div class="parent">
  <span class="child"></span>
</div>

这种方法的一个好处是，您不需要使用危险的 calc:

.parent {
  position: relative;
  width: 150px;
  height: 50px;
  background: red;
}
.parent .child {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 60px;
  background: skyblue;
}

<div class="parent">
  <span class="child"></span>
</div>

Note: On a related note, you can also have a look at this question and answer:

Answer 2

将 display: flex 设置为 parent
设置 align-self: stretch 为 child

这将拉伸 child div/button 的高度以适合其 parent 的高度，而无需任何技巧。

通过使用 position: absolute 而不是 flex-box，当您添加更多内容时最终不会很好，否则 re-arrange 以后将是一场噩梦。

跨越父按钮的 100% 高度

span 100% height of parent button

css

height

button