我创建了一个固定在页面底部的容器。但是，容器随后溢出页面，填充规则被完全忽略。我在论坛上搜索过，但找不到一个解决问题的方法。我试过使用position absolute，也试过使用Javascript计算滚动条宽度，但都没有用。
null
.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>null
我想你的意思是按钮是从左边切断的。您可以通过添加:.restaurant-page.book-table-container{left:0；right:0；}来防止这种情况。
但是，按钮将直接触摸屏幕的左右两侧。为了防止这种情况，我在左右两边添加了5px的填充，并将填充代码缩短为:padding-top:12px；衬垫-底部:12px；填充-左侧:5px；填充-右:5px；到:填充:5px 12px；。
null
.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: 5px 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;
}
/* for demonstration only */
body {
overflow-y: scroll;
}<div class="restaurant-page">
<div class="book-table-container">
<button>Book Table</button>
</div>
</div>