, используя контент-ящик, чтобы компенсировать высоту

Question

Будучи режимом выбора размера по умолчанию, все, что он сделал до сих пор, раздражает меня. Теперь, когда я думаю, что нашел для меня хорошее применение, я не могу заставить его проявить себя. Проверьте это

#container { 
 
    width:200px; 
 
    height:200px; 
 
    position:relative; 
 
} 
 

 
#textbar { 
 
    position:absolute; 
 
    left:0; right:0; bottom:0; 
 
    height:20px; 
 
    background-color:rgba(0,255,0,0.5); 
 
} 
 

 
#filler { 
 
    height:100%; 
 
    margin-bottom:20px; 
 
    box-sizing:content-box; 
 
    background-color:rgba(255,0,0,0.5); 
 
}

<div id="container"> 
 
    <div id="filler"></div> 
 
    <div id="textbar">here is text</div> 
 
</div>

Так что идея состоит в том, что следует принять текстовую строку 20px из нижней части контейнера и наполнитель должен взять на себя все остальное. Я понял, что, поскольку контент-бокс описывается как включающий margin и padding в его общей ширине/высоте, он бы вычитал те 20px, которые я дал ему для маржи от 100% и фактически был 100% -20px, но не имел такой удачи, он все еще покрывает весь контейнер и подсловляет текстовую панель.

Почему? И как еще я могу это сделать?

PS! не хотите использовать calc() из соображений совместимости.

Answer 1

Поскольку вы уже используете position: absolute; для текстового окна, я бы просто сделал следующее.

Изменение:

#filler { 
    height:100%; 
    margin-bottom:20px; 
    box-sizing:content-box; 
    background-color:rgba(255,0,0,0.5); 
} 

Кому:

#filler { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom:20px; 
    background-color:rgba(255,0,0,0.5); 
} 

Answer 2

Я полагал, так как содержание ящика описано как включающее в себя запас и прокладку в ее общей ширины/высоты

№: box-sizing: content-box, значения width и height включают только content box. Они не включают прокладки, границы и поля.

Чтобы достичь того, чего вы хотите, вы можете использовать border-box с прокладкой вместо края.

#container { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 
#textbar { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    height: 20px; 
 
    background-color: rgba(0, 255, 0, 0.5); 
 
} 
 
#filler { 
 
    height: 100%; 
 
    padding-bottom: 20px; 
 
    box-sizing: border-box; 
 
    background-color: rgba(255, 0, 0, 0.5); 
 
}

<div id="container"> 
 
    <div id="filler"></div> 
 
    <div id="textbar">here is text</div> 
 
</div>

современной альтернативы будет calc(100% - 20px) или Flexbox.