javascript - 堆叠的 div 相互调整大小

Question

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

该页面的结构如下:我有一个带有可调整大小的文本区域的页脚。在它上面我有一个将保存消息的 div。该 div 已将 overflow-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 添加 vendor 前缀。