将垂直滚动从页面移动到内部div

Question

我在<html元素上有一个没有垂直滚动的页面。我的意思是无论你如何缩放 - 它将调整到屏幕尺寸，总是有

• 顶部的红色div（内部内容），高度固定
• 在底部动态扩展高度绿色div（其高度取决于内部内容）。
• 在这些div之间还有1个div，其中2个孩子（黄色背景）具有可滚动内容。这个div应该让剩下的空间充满活力。

要删除页面的滚动，我只需使用 height: calc(100% - 83px) 将html高度完美地放在其内部元素总和上，其中83px是顶部和底部divs高度和。但是这里有一个问题：当底部div的高度增加时，我需要用javascript改变可滚动的中心div的高度。 我想仅使用css 解决此问题。这是jsfiddle和布局描述的图片。 到目前为止我发现了什么：

• 我认为父母div对于孩子应该有某种overflow:auto;和一个棘手的？ height: 100%而且孩子必须有'height：100％'
• 我不能使用绝对位置，因为我不知道中央div应该从哪里开始和垂直结束

代码如下：

<style>
.fluid-inline {
    display: inline-block;
    height: 100%;
    width: 100%;
}

.wrapper {
    /*I WANT TO REMOVE HARDCODED 83px SIZE */
    height: calc(100% - 83px); /*SUM nav + footer height.*/
    width: 100%;
}

.left {
    float: left;
}
.scrollable {
    background: yellow;
    height: 100%;
    min-width: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}
</style>

<nav></nav>
<div class="wrapper">
    <div class="fluid-inline">
        <div class="scrollable left"></div>
        <div class="scrollable"></div>
    </div>
    <div class="footer">
</div>

Answer 1

我认为您正在寻找灵活盒解决方案。它需要一些爱和关心才能让它在所有现代浏览器上运行，所以请查看caniuse.com以获取有关此信息的信息。

值得指出的是，这根本不适用于旧的浏览器版本，并且如果支持必不可少，则需要JavaScript替代品。

＆＃13;

＆＃13;

html,body{
  height:100%;
  margin:0;
}
#wrapper{
  height:100%;
  display:flex;
  flex-direction:column;
}
#header{
  height:50px;
  background-color:red;
}
#content{
  flex:1;  
  display: flex;
  min-height: 0; // FF FIX
  background-color:yellow;
}
.scrollable{
  width: 50%;
  overflow-y:auto;
  float:left;
  display:inline-block;
}
#footer{
  background-color:green;
}

＆＃13;

<div id="wrapper">
  <div id="header">
    Header
  </div>
  <div id="content">
    <div class="scrollable">
      <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
    </div>
    <div class="scrollable">
      <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
    </div>
  </div>
  <div id="footer">
    Content
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;