将元素宽度调整为父级中的滚动条

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>