<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>

.section:nth-child(2n + 1) {
    float: left;
    clear: left;
}

.section:nth-child(2n) {
    float: right;
    clear: right;
}

Скриншот

.container {
  column-width: 250px; /* Ширина колонки */
  column-gap: 10px;  /* Расстояние между колонками */
}

.item {
  break-inside: avoid; /* Запрещает разрыв блока */
}

Скриншот

• Шапка и подвал фиксированной высоты

  
  Расчет высоты блока с помощью функции calc().
  

  .content {
    height: calc(100vh - 50px - 50px);
  }

  
  Демо на codepen
  
  
  
• Шапка и подвал нефиксированной высоты

  
  Эмуляция поведения таблицы.
  

  .container {
    display: table;
    height: 100%;
    width: 100%;
  }
  
  .content {
    display: table-row;
    height: 100%;
  }

  
  Демо на codepen
  
  
  Резиновые блоки с помощью flexbox.
  
  

  .container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .content {
    flex-grow: 1;
  }

  
  Демо на codepen