位置：固定元素溢出窗口答案

【问题标题】：Position: Fixed element is overflowing window位置：固定元素溢出窗口
【发布时间】：2021-06-20 05:02:22
【问题描述】：

我创建了一个固定在页面底部的容器。然而，容器然后溢出页面并且填充规则被完全忽略。我搜索了论坛，但在我的问题上下文中找不到解决方案。我尝试过使用绝对位置，也尝试过使用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>

【问题讨论】：

很难理解是什么问题。

标签： html css css-position overflow

【解决方案1】：

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

但是，按钮将直接触摸屏幕的左侧和右侧。为了防止这种情况发生，我在左右两侧添加了 5px 的填充，并将填充代码从：padding-top: 12px; padding-bottom: 12px; padding-left: 5px; padding-right: 5px; 缩短为：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>

【讨论】：

非常感谢！