动态滚动区域

Question

我有具有div容器内部的三个div的一个页面：

____________________ 
|------------------| 
|| Expandable || 
||    || 
|------------------| 
|------------------| 
|| scroll area || 
||    || 
|------------------| 
|------------------| 
|| fixed  || 
||----------------|| 
|__________________| 

我的问题是，当顶部的div被扩展（由JavaScript组件）时，滚动区域被推下，在集装箱分区之外，而我需要它动态地收缩。 （固定div当前绝对定位，滚动div被压下）

它也不能使用固定的高度（例如像素），因为它需要动态调整到许多不同的屏幕尺寸。

视频的问题：https://youtu.be/M-isVl1hs8Q

CSS：

.scrollcontainer{ 
position:relative; 
width:100%; 
height:100%; 
} 
.floor{ 
    width:100%; 
    height:100% - 60px; 
    display:flex; 
    flex-direction:column; 
} 
.item{ 
    flex:1 1 auto; 
} 

.broom{ 
    transition:1s linear all; 
} 
.dirt{ 
    transition:1s linear all; 

} 
.rug{ 
    display:block; 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; 
} 

javaqscript/HTML：

 <div className="scrollcontainer"> 
      <div className="floor"> 
       <div className="broom item"> 
        <FoodItemList 
         foodItemList={[this.props.foodItem]} 
         user={this.props.user} 
        /> 
       </div> 
       <div className="dirt item"> 
        <Scrollbars 
         autoHeight 
        > 
        <Comments comments={this.props.foodItem.comments} /> 
       </Scrollbars> 
       </div> 
      </div> 
      <div className="rug"> 
       <Paper style={styles.paper} zDepth={0}> 
        <div className="leftcolumn"> 
         <TextField 
          style={{color: 'white'}} 
          hintText="You can leave a comment here" 
          onChange={this.handleComment} 
          value={this.state.commentText} 
         /> 
        </div> 
        <div className="rightcolumn"> 
         <IconButton 
          iconStyle={styles.smallIcon} 
          style={styles.small} 
          onTouchTap={this.addComment} 
         > 
         <ContentSend color={lightGreenA200} /> 
         </IconButton> 
        </div> 
       </Paper> 
      </div> 
     </div> 

谢谢！

Answer 1

本来很高兴看到一个不起作用的例子。我认为最好让那些回答的人决定什么是有用的，应该从他们的分析中省略什么，而不是自己。

下面是一个快速的代码，我鞭打，向您展示元素之间的交互性。它使用flexbox进行空间/大小协商，使用ed元素和“checkbox hack”模拟javascript组件。投掷你想要的overflow设置（不知道scroll或任何爵士乐的方向，或者如果你想要一个wrapper），这将负责布局。

下面是相关flexbox代码：

我把一些名字形象化各对口帮助传达例子的意思。

从某种意义上说，你有点扫地毯下的一些污垢！

.floor{ 
    width:100%; 
    height:100%; 
    border:1px solid red; 
    display:flex; 
    flex-direction:column; 
} 
.item{ 
    box-shadow: inset 0 0 16px -4px red; 
    flex:1 1 auto; 
} 

及相关标记为CSS：

<div class="container"> 
    <div class="floor"> 
    <div class="broom item"> 
    </div> 
    <div class="dirt item"> 
    </div> 
    </div> 
    <div class="rug"> 
    </div> 
</div> 

不要忘记检查为氏在这里被使用什么浏览器的支持！

http://codepen.io/anon/pen/ZBOwdw?editors=1100