如何解决位置:固定元素溢出窗口
我创建了一个固定在页面底部的容器。然而,容器随后溢出页面并且填充规则被完全忽略。我在论坛上搜索过,但无法在我的问题上下文中找到解决方案。我试过使用绝对位置,也试过使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。