javascript - 具有扩展组件的动态滚动区域

Question

我有一个页面，在一个容器 div 中包含三个 div:

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

我遇到的问题是，当顶部 div 扩展(通过 javascript 组件)时，滚动区域被向下推到容器 div 之外，而我需要它动态收缩。 (fixed div 当前是绝对定位的，scroll 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 进行空间/大小协商，使用 absolutely positioned 元素，以及“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