使用 CSS flex 拆分视口的最佳实践

Question

希望这不是一个无意义的问题，因为它在某种程度上是非特定的。

这很简单 - 我的目标是制作一个将 viewport/screen 垂直分成大致两半 (60/40) 的设计，类似于 AirBnB 的做法：-

这就像使用 flexbox 列一样简单吗（我正在使用 Bootstrap 4），指定列宽并将右侧列设置为 position: fixed？

非常欢迎任何人提出任何建议，因为我以前从未接触过这种类型的设计，我想确保我没有忽略任何东西。

Answer 1

这是一个 flex 基于布局的解决方案。

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 60vh;
}

.box .row.content {
  flex: 1 1 40vh;
}

<div class="box">
  <div class="row header">
    <p><b>header</b>
      (60%)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (40%)
    </p>
  </div>
</div>

使用 CSS flex 拆分视口的最佳实践

Best practice for splitting viewport with CSS flex

css

viewport

flexbox