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>

styles.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

<textarea id='textarea'
            className='form-control'
            onChange={this.onDataChange}
            placeholder='Type your data...'
            style="height: 100vh"></textarea>

这只是演示了造型。您可以对其进行编辑以在styles.js中包含样式。 vh单位（视口高度的缩写形式）是视口总高度的百分比，从名称可以看出。

Answer 2

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

以下示例：

＆＃13;

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

＆＃13;

两个元素彼此相邻，窗口高度为100％

2 个答案: