html - 位置:固定元素溢出窗口
问题描述
我创建了一个固定在页面底部的容器。然而,容器然后溢出页面并且填充规则被完全忽略。我搜索了论坛,但在我的问题上下文中找不到解决方案。我尝试过使用绝对位置,也尝试过使用 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>
解决方案
我想你的意思是按钮被切断到右边。您可以通过添加来防止这种情况:.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>
推荐阅读
- input - Dialogflow:如何通过代码创建具有特定上下文输入的意图?
- javascript - 如果它有一个跨度作为子级,则将类添加到父 div
- reactjs - 使用 Firebase 和 React 进行用户管理
- objective-c - 文档共享应用程序的安全规则和查询
- javascript - 地图全屏时 select2 不显示
- javascript - 监听从以编程方式安装的 Vue 组件发出的事件
- javascript - 地图可以改变对象吗?
- python - 在一个循环中绘制的子图图表非常压扁
- sap-cloud-sdk - ScpCfHttpDestination 在 cloudplatform-connectivity-3.3.1.jar 中不可用
- python - 如何在没有显式阶乘函数的情况下编写余弦泰勒级数