I持つコンテナのdiv内の3つのdiv持っページ:ダイナミックなスクロール領域
____________________
|------------------|
|| Expandable ||
|| ||
|------------------|
|------------------|
|| scroll area ||
|| ||
|------------------|
|------------------|
|| fixed ||
||----------------||
|__________________|
私が持っている問題であることを、トップのdivは(ジャバスクリプトコンポーネントによって)拡張され、スクロール領域はコンテナ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>
ありがとう!
おかげで、私は私に合わせてあなたの例を編集しているが、残念ながら問題が解消されません。私は自分の質問を改訂し、現在使用中のコードと問題のビデオを追加しました。どんなアドバイスをいただければ幸いですか? :) –
ごめんなさい、ただあなたのコメントに気づいた。今見ている。私の応答でこれを編集します。 – MassDebates
さらなる支援が必要な場合は、問題を再現して示す制御されたデモ/テストケースを作成する必要があります。 – MassDebates