將元素寬度調整為父級中的滾動條

Question

我有一張卡片，里面有一堆文字。 如果文本對於卡來說太大，我想添加一個滾動條。 該卡還具有頁腳。 我的問題是，如果有滾動條，我希望頁腳稍微縮小。 我不希望我的頁腳出現在滾動條下方。

在實際的應用程序中，頁腳類似於Microsoft Word標尺：

我可以將頁腳放在overflow-y區域內，但是它不再發粘（始終可見）。

這是代碼：

 #box { width: 300px; height: 300px; display: flex; flex-direction: column; } #content { flex: 1 1 auto; overflow-y: auto; } #stickyFooter { flex: 0 0 auto; background: red; height: 30px; } 

 <div id="box"> <div id="content"> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> </div> <div id="stickyFooter"></div> </div> 

理想的解決方案是CSS / HTML，而不需要JS。

Answer 1

您可以在內容中包含頁腳，並使用position:sticky （ https://caniuse.com/#feat=css-sticky ）

 #box { width: 300px; height: 200px; display: flex; flex-direction: column; } #content { flex: 1 1 auto; overflow-y: auto; } #stickyFooter { position: sticky; bottom: 0; left: 0; right: 0; background: red; height: 30px; } 

 <div id="box"> <div id="content"> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p> <p>end</p> <div id="stickyFooter"></div> </div> </div>