代码：https：//jsfiddle.net/gsnfzn35/3/
描述起来有点时髦，单击切换抽屉按钮。出现右侧的拉出式抽屉。拉出式抽屉是一个容器，但有2个关键组件。第一个组件是所有内容都在顶部。最后一个组件是底部的“固定行”：
<div class="scroll-fixed-row" style="width:100%;text-align: right">
<p>
FIXED FINAL ROW
</p>
</div>
此行应为抽出式抽屉的宽度，无论该宽度是多少；不是屏幕的宽度。不过，当前，如果使用来检查元素width:100%，则会看到宽度是屏幕的宽度，而不是拉出式抽屉。看到这种情况的另一种方法是，当出现时width:100%;text-align:right，文本不在屏幕上，并拉到太宽的行的右侧。删除width:100%，您可以再次看到该文本。
我猜这是由于scroll-fixed-row固定的事实，因此，它是从屏幕上拉出的宽度，而不是拉出式抽屉本身。但是此固定是必要的，因为scroll-fixed-row即使其余的抽拉抽屉卷轴仍需保持在底部。在这种限制下，scroll-fixed-row对于任何屏幕（完全响应），而不必基于媒体查询提供特定的像素宽度，我如何将的宽度设置为拉出抽屉的宽度？
我问这个问题的原因是因为我想scroll-fixed-row使用表和2<td width="50%">或<div class="col-xs-6">连续使用Bootstrap网格和2将“部分”分为2个。在当前的实现中（小提琴中不显示），第二个网格中的内容仅被下推页面（现在是同样的问题），因为表格宽度是从屏幕继承的。我想我可以弄清楚这部分内容是否有人可以帮助我回答这个问题。
可以通过使用inherit而不是来解决宽度，在您的情况下100%，这将使fixed元素获得其父元素的宽度.container.scroll。我注意到您已向父级添加了填充，继承的宽度将包括填充，因此该fixed元素将覆盖滚动条。
代码：
.scroll-fixed-row {
position: fixed;
text-align: right;
background-color: white;
border-top: 1px solid black;
width: inherit; /* get width from parent */
bottom: 0; /* stick to bottom */
right: 0; /* fix offset caused by padding */
}
我注意到代码中的另一件事是，您正在使用margin-top: 70pxon.scroll使其从固定的红色导航偏移，这导致看不见视口的底部部分（尤其是底部滚动箭头）不可见。我将其更改为以下内容：
.scroll {
position: fixed;
top: 70px; /* offset from top (nav height) */
height: calc(100% - 70px); /* calculate height minus the top offset */
}
如果要防止固定元素与滚动条重叠，则可以pointer-events: none在HTML中应用并添加另一个包装，该包装应获得15px与内容类似的间距，以实现更好的一致性：
.scroll-fixed-row {
...
pointer-events:none; /* disables mouse functionality to enable scrollbar control */
}
.scroll-fixed-row .inner {
border-top:2px solid red;
background:lightblue;
margin:0 30px 0 15px;
pointer-events:auto; /* allows mouse functionality */
}
jsFiddle演示-滚动条重叠：https ://jsfiddle.net/azizn/guufj4a0/
jsFiddle演示-附加包装器：https ://jsfiddle.net/azizn/d6wwk51b/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句