时间戳

首页 > 解决方案 > 两个相邻的元素，窗口高度为 100%

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

问题描述

我想将两个元素并排放置，但至少其中一个（文本区域）我需要始终保持 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'
  }
};

标签： javascripthtmlcss

解决方案

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

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

推荐阅读