Question

我有一个页面，在容器div中有三个div：

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

我遇到的问题是当顶部div被扩展（通过javascript组件）时，滚动区域被推下，在容器div之外，而我需要它来动态收缩。（固定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进行空间/大小协商，使用absolute ly position ed元素，使用“checkbox hack”来模拟javascript组件。投掷您想要的overflow设置（不确定scroll或任何爵士乐的方向，或者您是否需要wrapper），这将照顾布局。< / p>

以下是相关的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

带有展开组件的动态滚动区域

1 个答案: