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

我在

• red div on top (with inner content) with fixed height

顶部的红色div(内部内容),高度固定

• dynamically expanded height green div on bottom (its height depends on inner content).

底部动态扩展高度绿色div(其高度取决于内部内容)。

• Between those divs there's 1 more div with 2 children (with yellow background) that have scrollable content. This div should fluid the rest of space.

在这些div之间还有1个div,其中2个孩子(黄色背景)具有可滚动内容。这个div应该流动其余的空间。

To remove page's scroll I just feet the html height perfectly to its inner elements sum by using height: calc(100% - 83px) where 83px is top and bottom divs height sum. But here's a problem: when the bottom div's height increases I need to change scrollable center div's height with Javascript. I want to solve this only using css. Here's jsfiddle and the picture described by layout. What I found so far:

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

• I think that parent div should have some kind of overflow:auto; for children and a tricky ?height: 100% and children must have `height: 100%'

我认为父div应该有某种溢出:auto;对于儿童和一个棘手的?身高:100%,儿童必须有'身高:100%'

• I can't use absolute position because I don't know where the central div should start and end vertically

我不能使用绝对位置,因为我不知道中央div应该从哪里开始和垂直结束

The code is listed below:

代码如下:

1 个解决方案

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;
  background-color:yellow;
}
.scrollable{
  width: 50%;
  overflow-y:auto;
  float:left;
  display:inline-block;
}
#footer{
  background-color:green;
}

  

    Header
  
  

    

      

        
1
        
1
        
1
        
1
        
1
        
1
        
1
      
    
    

      

        
1
        
1
        
1
        
1
        
1
        
1
        
1
        
1
        
1
        
1
        
1
        
1
        
1
        
1
        
1
        
1
        
1
        
1
        
1
        
1
        
1
      
    
  
  

    Content