堆叠的 div 相互调整大小

Posted 2023-02-22

技术标签:

【中文标题】堆叠的 div 相互调整大小【英文标题】：Stacked divs resizing each other 【发布时间】：2017-01-11 17:58:20 【问题描述】：

这可能会很长：我正在尝试使用 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 来做到这一点。

【问题讨论】：

【参考方案1】：

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

这是.container-fluid