我有以下标记
<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% 高度。这能做到吗?
最佳答案
高度仅适用于为祖先正确定义的高度。如果你想让高度起作用,那是一个棘手的问题。您可以使用我的最爱之一,但您需要确保它适用于所有情况:
- 将
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>
Note: On a related note, you can also have a look at this question and answer: Calc() alternative to fixed side bar with content?
关于css - 跨越父按钮的 100% 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40994988/