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

Question

希望这不是一个无意义的问题，因为它有点不具体。

这很简单 - 我的目标是制作一个将视口/屏幕垂直分成粗半部（60/40）的设计，类似于AirBnB的工作方式： -

AirBnB New York

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

任何人的建议都会受到欢迎，因为我之前从未接触过这种类型的设计，我想确保我不会忽略任何东西。

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;