ReactJS 将屏幕分成两半答案

【问题标题】：ReactJS Split screen in two halvesReactJS 将屏幕分成两半
【发布时间】：2020-07-20 02:46:48
【问题描述】：

如何将屏幕分成两半，例如：，以便在每一半中添加我的自定义元素？

示例：蓝色一侧是图片，后半部分包含一些随机文本输入

我一直在尝试这样：

<div className={styles.splitScreen}>
        <div className={styles.topPane}>
          {topPane}
        </div>
        <div className={styles.bottomPane}>
          {bottomPane}
        </div>
      </div>

使用包含以下内容的 scss 文件：

.splitScreen {
  position: relative;
  height: 100vh;

  .topPane,
  .bottomPane {
    position: relative;
    width: 100%;
    height: 50%;
  }

  .topPane {
    transform: rotate(180deg);
  }
}

但没有成功。

【问题讨论】：

它们应该并排还是一个在另一个之上？
@ellitt 并排

标签： css reactjs sass

【解决方案1】：

这听起来像是 CSS flexbox 的一个很好的用例。 CSS FLEXBOX

<div className={styles.splitScreen}>
  <div className={styles.topPane}>{topPane}</div>
  <div className={styles.bottomPane}>{bottomPane}</div>
</div>

样式对象：

splitScreen: {
    display: 'flex';
    flexDirection: 'row';
},
topPane: {
    width: '50%',
},
bottomPane: {
    width: '50%',
},

编辑：如果它们应该并排，请使用flexDirection: 'row',。

【讨论】：

如果它们应该彼此相邻，您需要制作 flex-direction: row; 或完全忽略它，因为这是默认设置。
谢谢@iepuf1lla，但是有没有办法让第一个 div 中的图像适合屏幕的整个高度？

【解决方案2】：

听起来你想要 flexbox 或 css-grid。

由于 iepur1lla 已经有针对 flexbox 的答案，这里有一个 css-grid 替代方案；

.splitScreen {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

如果您想确保 topPane 和 bottomPane 始终位于这两个位置，您可以将其添加到 CSS：

  .topPane {
    grid-column: 1;
    grid-row: 1;
  }

  .bottomPane {
    grid-column: 2;
    grid-row: 1;
  }

【讨论】：