2016-11-15 74 views
0

我有具有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> 

謝謝!

回答

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

+0

非常感謝您的回覆,我已經編輯好例子,以適應我的,但遺憾的是問題仍然存在。我修改了我的問題,添加了當前正在使用的代碼和問題的視頻。任何建議您可能會非常感激! :) –

+0

非常抱歉,剛剛注意到你的評論。現在看。將與我的迴應編輯。 – MassDebates

+0

如果您需要進一步的幫助,您應該製作一個可重現和展示問題的受控演示/測試案例。 – MassDebates