Динамическая область прокрутки с расширяющимися компонентами

Question

У меня есть страница, которая имеет три дивы внутри контейнер 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> 

Спасибо!

Answer 1

Было бы неплохо увидеть нерабочий пример. Я думаю, что лучше всего позволить тем, кто отвечает, решить, что полезно и что опустить из своего анализа, а не самому себе.

Вот быстрый код, который я взбивал, чтобы показать вам интерактивность между элементами. Он использует flexbox для согласования пространства/размера, элемент absolute ly position 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