Position：固定元素溢出 window

Question

我创建了一个固定在页面底部的容器。 然而，容器然后溢出页面并且填充规则被完全忽略。 我搜索了论坛，但在我的问题上下文中找不到解决方案。 我尝试过使用 position absolute，也尝试过使用 Javascript 来计算滚动条宽度，但无济于事。

 .restaurant-page { height: 100%; }.restaurant-page.book-table-container { position: fixed; width: 100%; bottom: 0; background-color: white; border-top: solid 1px #f2f2f2; padding-top: 12px; padding-bottom: 12px; }.restaurant-page.book-table-container button { width: 100%; border: 0; border-radius: 4px; background-color: #00ccbc; padding-top: 14px; padding-bottom: 14px; color: white; font-size: 16px; font-weight: 600; }

 <div class="restaurant-page"> <div class="book-table-container"> <button>Book Table</button> </div> </div>

Answer 1

我想你的意思是按钮被切断到右边。 您可以通过添加来防止这种情况： .restaurant-page.book-table-container { left: 0; right: 0; } .restaurant-page.book-table-container { left: 0; right: 0; } .restaurant-page.book-table-container { left: 0; right: 0; } 。

然而，按钮将直接触摸屏幕的左侧和右侧。 为了防止这种情况，我在左右两侧添加了 5px 的填充，并将填充代码缩短为： padding-top: 12px; padding-bottom: 12px; padding-left: 5px; padding-right: 5px; padding-top: 12px; padding-bottom: 12px; padding-left: 5px; padding-right: 5px; to： padding: 12px 5px; .

 .restaurant-page { height: 100%; }.restaurant-page.book-table-container { position: fixed; bottom: 0; left: 0; right: 0; background-color: white; border-top: solid 1px #f2f2f2; padding: 12px 5px; }.restaurant-page.book-table-container button { width: 100%; border: 0; border-radius: 4px; background-color: #00ccbc; padding-top: 14px; padding-bottom: 14px; color: white; font-size: 16px; font-weight: 600; } /* for demonstration only */ body { overflow-y: scroll; }

 <div class="restaurant-page"> <div class="book-table-container"> <button>Book Table</button> </div> </div>