本文介绍了span父按钮的高度为100%的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下标记
<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>注意：在相关注释中，您还可以查看此问题和答案：Calc() alternative to fixed side bar with content?
这篇关于span父按钮的高度为100%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！