跨越父按钮的 100% 高度答案

【问题标题】：span 100% height of parent button跨越父按钮的 100% 高度
【发布时间】：2021-08-19 04:35:11
【问题描述】：

我有以下标记

<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% 高度。这个可以吗？

【问题讨论】：

标签： css button height

【解决方案1】：

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

给家长position: relative;。
将position: absolute; 分配给需要完整height 和width 的元素。
为元素 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>

在上面的sn-p中，注意到这也可以工作，如果你给：

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

注意：在相关的说明中，您也可以看看这个问题和答案：Calc() alternative to fixed side bar with content?

【讨论】：

全面回答谢谢。我下定决心要保持元素的相对性，但这很好用。

【解决方案2】：

将display: flex 设置为父级
为孩子设置align-self: stretch

这将拉伸子 div/按钮的高度以适应其父级的高度，而无需任何技巧。

通过使用position: absolute 而不是flex-box，最终不会很好，当您添加更多内容或稍后重新安排将是一场噩梦。

【讨论】：