スパン100％の高さ

Question

私は、次のマークアップ、私はボタンの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; 
     span { 
      background: $leithyellow; 
      height: 100%; 
      overflow:auto; 
      display: block; 
      width: calc(100% - 60px); 
      float: left; 
      margin-left:10px; 
      padding-left:20px; 

     } 

を持っています。これはできますか？

ありがとうございました。

Answer 1

高さは、祖先の高さが適切に定義されている場合にのみ適用されます。高さを働かせたいのならば、それは難しいことです。私のお気に入りの1つを使うことができますが、すべてのケースで正しく動作することを確認する必要があります。

1. 親にposition: relative;を付けます。
2. heightとwidthを必要とする要素にposition: absolute;を付けます。
3. 要素にすべての面の値を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?