диапазон 100% высоты родительского кнопки

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

Высоты применяются только в том случае, если высота определена надлежащим образом для предков. Если вы хотите, чтобы высота работала, это сложно. Вы можете использовать один из моих избранных, но вы должны убедиться, что он работает во всех случаях:

1. Дает position: relative; родительскому.
2. Сообщите об ошибке position: absolute; к элементу, который нуждается в полноценном height и width.
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?