Question

描述时有点时髦，单击切换抽屉按钮。右侧的拉出式抽屉出现。拉出式抽屉是一个容器，但有两个关键部件。第一个组件是顶部的所有内容。最后一个组件是底部的“固定行”：

<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的宽度设置为拉出抽屉的宽度，对于任何屏幕（完全响应）而不必根据媒体查询提供特定的像素宽度？

我问这个的原因是因为我想使用表格和2 scroll-fixed-row或使用Bootstrap网格和2 <td width="50%">将<div class="col-xs-6">划分为2个“部分”连续。在当前的实现中（不在小提琴中），第二个网格中的内容只是被推离页面（现在同样的问题），因为表格宽度是从屏幕继承的。如果有人能帮我回答这个问题，我想我可以解决这个问题。

Answer 1

使用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: 70px上使用.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/

设置宽度：相对于需要修复的对象的另一个对象的100％

1 个答案: