Question

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

页面的结构如下：我有一个带有可调整大小的文本区域的页脚。在它上面我有一个将持有消息的div。 div设置为overflow-y滚动，滚动条仅用于消息，不占用整个页面的空间。随着页脚与textarea的增长，我希望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

您可以尝试基于弹性框的布局。

这适用于.container-fluid

display: flex;
flex-direction: column;

这适用于.messages

flex: 1;

然后从position: fixed

中删除footer

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

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

堆叠的div相互调整大小

1 个答案: