使用內容框來抵消高度

Question

作爲默認的box-sizing模式，到目前爲止所做的所有操作都讓我很煩惱。現在我認爲我發現它有很好的用處，但是我無法表現出來。檢查它

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

這樣的想法是，textbar應該從容器的底部取20像素和填料應採取休息。我認爲內容框被描述爲在其寬度/高度中包含邊距和填充，它將從100％減去20px的邊距，實際上是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的。