ReactJS如何将屏幕分成两半？

Question

如何将屏幕分成两半，如下所示：以便在每个半部分中添加我的自定义元素？

例如：蓝色一侧是一张图片，第二侧包含一些随机文本输入。

我一直试图这样做：

<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);
  }
}

但是没有成功。

- Naffets

---

它们应该是并排还是一个在另一个上面？ - ellitt

@ellitt 并排显示 - Naffets

Answer 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',。

- Mario

---

如果它们应该相邻，您可以设置flex-direction: row;或者完全省略，因为这是默认值。 - ellitt

谢谢@iepuf1lla，不过有没有办法让第一个div中的图像适应整个屏幕的高度？ - Naffets

Answer 2

听起来你需要弹性盒子或CSS网格布局。

既然iepur1lla已经回答了有关弹性盒子的问题，这里提供一个CSS网格布局的替代方案；

.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;
  }

- ellitt