如何使用 inline-block 和 position 粘性

Question

 .container { display: inline-block; min-width: 100% }.header, .footer { position: sticky; left: 0; width: 100%; max-width: 100vw; /* This line is creating problem when the table overflows horizontally */ }

 <div class="container"> <div class="header"></div> <div class="table"></div> <div class="footer"></div> </div>

表格可能會垂直和水平溢出，並且可能會縮小。 header 和頁腳將粘在頁面的左側。
問題是當頁面水平溢出時，它的最大寬度為 100vw。 這實際上是在 body 寬度的基礎上增加了 12px。 我猜 12px 是滾動條的寬度。 我想始終保持 header 和頁腳的寬度與正文寬度相同。 那可能嗎？

Answer 1

只需將其刪除。

 .container { display: inline-block; min-width: 100% }.header, .footer { position: sticky; left: 0; width: 100%; }.table { white-space: nowrap; }

 <div class="container"> <div class="header">bla bla bla</div> <div class="table">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div> <div class="footer">bla bla bla</div> </div>