堆叠的 div 相互调整大小

Question

这可能会很长： 我正在尝试使用 Electron、React 和 Socket.io 制作一个聊天应用程序（类似于 Slack）。不过，我的问题主要是处理 React 和 CSS/Sass。现在我有一些引导程序，但我根本没有真正使用网格系统，所以可以/可能会报废。

页面结构如下：我有一个带有可调整大小的文本区域的页脚。在它上面我有一个 div 将保存消息。该 div 已将溢出-y 设置为滚动，这样滚动条仅用于消息并且不占用整个页面的空间。我希望 div 随着页脚随着文本区域的增长而变短。现在虽然 div 只是在页脚下延伸（以及滚动条）。由于消息填充了 div，因此滚动条中没有可滚动的内容和拇指（我认为这是正确的术语）。

React 组件（为简洁起见，我只包含了一个 li，但在我的代码中我有一堆）：

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 并通过提供页脚和ID 并使用document.getElementById('footer') 来添加事件侦听器。无论我尝试什么，我都无法在 footerResize 中获得有关页脚大小的任何信息。对此的任何帮助将不胜感激。我什至不知道这是否是我应该使用 sass 属性做的事情，或者我是否需要 js/React 来做到这一点。

Answer 1

您可以尝试基于 flexbox 的布局。

这是.container-fluid

display: flex;
flex-direction: column;

这是.messages

flex: 1;

然后你从footer中删除position: fixed

这是做什么的：它设置.messages 的高度以填充其父级的剩余空间。所以当footer变大时，剩余空间变少，.messages会缩小。

请注意，您需要为 flexbox 添加供应商前缀，具体取决于您的目标浏览器支持。