Question

问题

我的侧边栏位置固定，位置始终为100％。问题是，在侧边栏中，我有很少的静态元素和一个带有动态内容的div，它们可以填充侧边栏的其余空间。

代码

＆＃13;

<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>

＆＃13;

结果

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

Answer 1

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

您需要在侧栏上使用display:flex，使用固定宽度 使用flex-direction:column（已添加顶部：0 ，左：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>

滚动div，从父元素填充剩余的空间

1 个答案: