Spannweite 100% Höhe der Eltern Taste

Question

Ich habe das folgende Markup

<button class="filter"><div class="radio"><div class="circle"></div></div> <span>Account Management</span></button> 

und 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; 

     } 

ich nicht die Spanne bekommen kann bis zu 100% Höhe der Schaltfläche zu erweitern. Kann das gemacht werden?

Danke.

Answer 1

Höhen werden nur angewendet, wenn die Höhen für die Vorfahren korrekt definiert sind. Wenn Sie möchten, dass die Höhe funktioniert, ist das eine knifflige Angelegenheit. Sie können eine meiner Favoriten verwenden, aber Sie müssen sicherstellen, dass sie in allen Fällen funktioniert:

1. Geben Sie position: relative; an die übergeordneten.
2. Geben Sie position: absolute; an das Element, das volle height und width benötigt.
3. Geben Sie das Element 0 Werte für alle Seiten.

Snippet

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

In dem obigen Snippet wird darauf hingewiesen, dass dies auch funktionieren kann, wenn man geben:

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

Ein Gutteil an diesem Ansatz ist, müssen Sie den gefährlichen calc nicht verwenden:

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

Hinweis: Auf einem verwandten beachten Sie auch können Schau dir diese Frage an und antworte: Calc() alternative to fixed side bar with content?