位置：固定元素溢出窗口

Question

我创建了一个固定在页面底部的容器。但是，容器随后溢出页面，填充规则被完全忽略。我在论坛上搜索过，但找不到一个解决问题的方法。我试过使用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

Answer 1

我想你的意思是按钮是从左边切断的。您可以通过添加:.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>