如何实现两元素并排且textarea始终占100%窗口高度？

我帮你整理了一套省心的实现方案，用Flexbox就能完美搞定两个元素并排、同时让textarea始终占满窗口高度的需求，咱们一步步来：

1. 调整HTML结构 #

先确保两个并排元素都放在同一个flex容器里，我补全了你代码里省略的部分，方便你参考：

<div style={styles.rowEqHeight}>
  {/* 第一个并排元素 - 比如你需要的侧边栏/其他组件 */}
  <div style={styles.sidebar}>
    <p>这里放你的侧边内容</p>
    <button>示例按钮</button>
  </div>
  {/* textarea所在的容器 */}
  <div style={styles.component}>
    <div className='input-group'>
      <textarea 
        id='textarea' 
        className='form-control' 
        onChange={this.onDataChange} 
        placeholder='Type your data...'
        style={styles.textarea}
      ></textarea>
    </div>
  </div>
</div>

2. 配置内联样式（styles对象） #

核心是让flex容器占满窗口高度，同时控制子元素的布局规则：

const styles = {
  // 父容器：开启flex布局，强制占满整个视口高度
  rowEqHeight: {
    display: 'flex',
    height: '100vh',
    margin: 0,
    padding: 0,
    boxSizing: 'border-box'
  },
  // 侧边元素（可选）：固定宽度，自动占满父容器高度
  sidebar: {
    width: '220px',
    background: '#f5f5f5',
    padding: '15px',
    boxSizing: 'border-box'
  },
  // textarea的父容器：自动填充剩余宽度，高度拉满
  component: {
    flex: 1, // 吃掉容器剩下的所有宽度
    height: '100%',
    padding: '15px',
    boxSizing: 'border-box'
  },
  // textarea本身：完全占满父容器高度和宽度
  textarea: {
    height: '100%',
    width: '100%',
    boxSizing: 'border-box', // 避免padding导致溢出
    resize: 'none' // 可选：禁止用户手动调整textarea大小
  }
};

3. 关键细节补充 #

• 别忘了给全局的html和body设置高度，不然100vh可能不生效：

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  

• 如果不需要侧边元素，直接删掉sidebar部分，component会自动占满整个宽度。
• textarea内容过多时，浏览器会自动显示垂直滚动条，不用额外配置。

这样调整后，textarea就会始终贴合窗口高度，和另一个元素稳稳并排啦～

内容的提问来源于stack exchange，提问作者Malvinka