html - 在填充父元素剩余空间的 div 上滚动

Question

问题

我的网站有固定位置的侧边栏，高度始终为 100%。问题是，在侧边栏中，我有一些静态元素和一个包含动态内容的 div，这些内容应该会填充侧边栏的其余空间。

代码

<div id="sidebar" style="height:100%; background:#73A2; postion:fixed; flex:none; overflow-y:hidden;">
  <button>one</button><br/>
  <button>two</button><br/>
  <button>three</button><br/> //more static content

  <div id="scrollableDiv" style="overflow-y:auto; height:100%;">
    Really long content
  </div>

</div>

结果

我设法得到的几乎是最终效果，因为可滚动的 div 正在填充其余空间，但看起来它需要完整的父高度来设置它的滚动高度。结果是，当我滚动查看动态列表中的最后一个位置时，大约 10% 的滚动溢出到屏幕下方。知道如何在不计算静态元素高度的情况下处理它吗？当 scrollableDiv 的高度设置为例如。到 80%，它没有填充其余空间(大约 10px 左右)，但滚动效果很好。

Answer 1

以下是您需要更改的内容以使其适用于此演示:

• 您需要在sidebar 和flex-direction:column 上使用display:flex 和固定宽度 (添加了 top:0, left:0 以及消除任何额外的边距) 以使其灵活(但仅适用于动态长内容 ).
• 用overflow-y auto设置动态长内容flex:1;，这样它就会一直灵活且永不溢出。

注意:红色背景表示它占用了侧边栏的全部剩余空间。

当有很长的溢出内容时:

#sidebar {
  height: 100%;
  background: #73A2;
  position: fixed;
  top:0;
  left:0;
  flex: none;
  overflow-y: hidden;
  display:flex;
  flex-direction:column;
  width:200px;
}

#scrollableDiv {
  overflow-y: auto;
  background:red;
  width:100%;
  height: 100%;
  flex:1;
}

<div id="sidebar">
  <button>one</button><br/>
  <button>two</button><br/>
  <button>three</button><br/> //more static content

  <div id="scrollableDiv">
    Really long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentReally long contentv
  </div>

</div>

没有溢出内容时:

#sidebar {
  height: 100%;
  background: #73A2;
  position: fixed;
  top:0;
  left:0;
  flex: none;
  overflow-y: hidden;
  display:flex;
  flex-direction:column;
  width:200px;
}

#scrollableDiv {
  overflow-y: auto;
  background:red;
  width:100%;
  height: 100%;
  flex:1;
}

<div id="sidebar">
  <button>one</button><br/>
  <button>two</button><br/>
  <button>three</button><br/> //more static content

  <div id="scrollableDiv">
     contentReally long contentReally long contentReally long contentReally long content
  </div>

</div>