javascript - 将元素宽度调整为父级滚动条

Question

我有一张卡片，里面有一堆文字。如果文本对于卡片来说太大，我想添加一个滚动条。该卡还有一个页脚。我的问题是，如果有滚动条，我希望页脚稍微缩小。我不希望我的页脚出现在滚动条下方。

在实际应用中，页脚就像 Microsoft Word 的标尺:

我可以将页脚放在 overflow-y 区域内，但它不再是粘性的(始终可见)。

代码如下:

#box {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
}

#content {
  flex: 1 1 auto;
  overflow-y: auto;
}

#stickyFooter {
  flex: 0 0 auto;
  background: red;
  height: 30px;
}

<div id="box">
  <div id="content">
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
  </div>
  <div id="stickyFooter"></div>
</div>

理想的解决方案是 CSS/HTML 而不需要 JS。

Answer 1

您可以在内容中包含页脚并使用 position:sticky ( https://caniuse.com/#feat=css-sticky )

#box {
  width: 300px;
  height: 200px;
  display: flex;
  flex-direction: column;
}

#content {
  flex: 1 1 auto;
  overflow-y: auto;
}

#stickyFooter {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: red;
  height: 30px;
}

<div id="box">
  <div id="content">
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>BLAHBLAHBLAHBLAHBLAHBLHAH</p>
    <p>end</p>
    <div id="stickyFooter"></div>
  </div>
</div>