Сложенные divs, изменяющие размер друг друга

Question

Это, вероятно, будет длинным: Я пытаюсь сделать приложение чата (похожее на Slack) с помощью Electron, React и Socket.io. Моя проблема в основном касается React и CSS/Sass. Прямо сейчас у меня есть несколько бутстрапов, но я вообще не использую систему гридов, так что это может быть/может быть отменено.

Структура страницы выглядит следующим образом: у меня есть нижний колонтитул с изменяемым размером textarea. над ним у меня есть div, который будет содержать сообщения. Этот div имеет переполнение-y, установленное для прокрутки, таким образом полоса прокрутки предназначена только для сообщений и не занимает пространство всей страницы. Я хочу, чтобы div становился короче, когда нижний колонтитул растет с текстовым полем. Прямо сейчас, хотя div просто распространяется под нижним колонтитулом (и полосой прокрутки вместе с ним). Поскольку сообщения заполняют div, прокручивать и ничего больше (я думаю, это правильный термин) в полосе прокрутки нет.

Реагировать компонент (я включен только один Ли для краткости, но в моем коде я получил кучу):

import React from 'react'; 
import { Button, Image, Media, Panel } from 'react-bootstrap'; 

export default class Page extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = props; 
    } 

    footerResize() { 
    // code to resize messages div, or at least get some information about 
    // the footer's height 
    } 

    render() { 
    return (
     <div className="page"> 
     <div className="sidebar"> 
     </div> 
     <div className="container-fluid"> 
      <div classname="messages"> 
      <ul> 
       <li className="message> 
       <Media> 
        <Media.Left> 
        <Image src="#" /> 
        </Media.Left> 
        <Media.Body> 
        <Media.Heading> 
         Name 
        </Media.Heading> 
        Message content 
        </Media.Body> 
       </Media> 
       <li> 
      </ul> 
      </div> 
      <footer> 
      <textarea defaultValue="test text" /> 
      </footer> 
     </div> 
     </div> 
    ); 
    } 
} 

_page.scss (в большинстве случаев это от имени файла _page.scss но несколько свойств вытягивают из других файлов здесь, так что я только печатая содержимое одного файла):

$dark-grey: #383838; 
$default-font-color: #FFFFFF; 
$light-grey: #474747; 
$light-light-grey: #908E8F 
$sidebar-width: 250px; 

body { 
    color: $default-font-color; 
    overflow: hidden; 
} 

ul { 
    list-style: none; 
} 

.page { 
    background-color: $light-grey; 
    height: 100vh; 
    .sidebar { 
    background-color: $light-light-grey; 
    position: fixed; 
    height: 100%; 
    width: $sidebar-width; 
    .container-fluid { 
     margin-left: $sidebar-width; 
     padding-left: 0px; 
     padding-right: 0px; 
     .messages { 
     overflow-y: scroll; 
     } 
     footer { 
     background-color: $main-green; 
     bottom: 0; 
     padding-bottom: 10px; 
     padding-left: 10px; 
     padding-right: 10px; 
     padding-top: 10px; 
     position: fixed; 
     width: calc(100% - #{$sidebar-width}); 
     } 
    } 
    } 
} 

Я пробовал кучу разных вещей, чтобы получить эту работу. Я пробовал несколько модулей узлов. Я попытался добавить прослушиватели событий, добавив ref='footer' в нижний колонтитул и ссылаясь на него как this.refs.footer при добавлении слушателя событий, а также с помощью нижнего колонтитула и идентификатора и используя document.getElementById('footer'). Что бы я ни пытался, я не могу получить информацию о размере нижнего колонтитула в footerResize. Любая помощь по этому поводу будет оценена по достоинству. Я даже не знаю, если это то, что я должен делать со свойствами sass или мне нужен js/React для этого.

Answer 1

Вы можете опробовать макет flexbox.

Это для .container-fluid

display: flex; 
flex-direction: column; 

это для .messages

flex: 1; 

Затем удалить position: fixed из footer

Что это делает: он задает высоту .messages, чтобы заполнить оставшееся пространство его родителя , Поэтому, когда footer становится больше, меньше места остается и .messages будет уменьшаться.

Обратите внимание, что вам нужно будет добавить префикс поставщика для flexbox в зависимости от вашей целевой поддержки браузера.