javascript - 两个相邻的元素，窗口高度为 100%

Question

我想将两个元素并排放置，但至少其中一个(textarea)我需要窗口的高度始终为 100%。我在这里检查了几个类似的问题，但我不知道如何将它们放在一起。你能帮忙吗？

html:

<div style={styles.rowEqHeight}>
  <div style={styles.component}>
    <div className='input-group'>
      <textarea id='textarea'
                className='form-control'
                onChange={this.onDataChange}
                placeholder='Type your data...'></textarea>
    </div>
  </div>
    <div style={styles.component}>
      <Treebeard data={this.state}
                 decorators={decorators}
                 onToggle={this.onToggle}/>
    </div>

样式.js

export default {
  component: {
    width: '50%',
    display: 'inline-block',
    verticalAlign: 'top',
    padding: '20px',
  },
  rowEqHeight: {
    display: '-webkit-box',
    display: '-webkit-flex',
    display: '-ms-flexbox',
    display: 'flex'
  }
};

Answer 1

尝试在您的 CSS 中使用 100vh 或为您的元素使用内联 css。这会将高度设置为窗口的 100%。

示例如下:

<textarea style="height:100vh"></textarea>