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;
        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;提供给家长。
将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>

在上面的代码段中，请注意，如果您提供：

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

Answer 2

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

这将拉伸子div /按钮的高度以适合其父/母按钮的高度。

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

跨越父按钮的100％高度

2 个答案: