Home Ask Login Register

Developers Planet

Your answer is one click away!

U4EA 2 weeks ago

Best practice for splitting viewport with CSS flex

Hoping this is not a nonsense question as it is in a way a tad non-specific.

It's quite simple - I am aiming to produce a design splitting the viewport/screen into rough halves (60/40) vertically, similar to how AirBnB do: -

AirBnB New York

Is this just as simple as using flexbox columns (I am using Bootstrap 4), specifying the column widths and setting the right-hand side column to position: fixed?

Any advice that anyone has would be most welcome as I have never approached this type of design before and I want to make sure I am not overlooking anything.


jfeferman 2 weeks ago

Here's a flex layout based solution.

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;

.box .row.footer {
  flex: 0 1 40px;
<div class="box">
  <div class="row header">
  <div class="row content">

Post Status

Asked in 2 weeks ago
Viewed 2,346 times
Voted 13
Answered 0 times


Leave an answer

Quote of the day: live life