Как кодировать адаптивное одностраничное приложение, удерживающее на одном экране?

Question

Я пытаюсь кодировать одностраничное приложение, содержащееся на одном экране со следующей архитектурой:

• Один фиксированный заголовок, имеющий:

  • Два столбца (1/3 слева, 2/3 справа):
    • логотип слева
    • хлебная крошка справа.

• Одно неподвижное тело, имеющее:

  • Два столбца (1/3 слева, 2/3 справа):
    • вертикальный контейнер с полосой прокрутки:
      • один блок ссылок
      • один блок ссылок в социальных сетях, кредиты и т. Д. (Который всегда должен быть внизу, как нижний колонтитул)
    • контейнер содержимого с полосой прокрутки

Фактическое расположение показано на следующем рисунке: https://ibb.co/2ybxxdy

Я уже пытался сделать это с помощью Bulma CSS Framework и некоторых пользовательских CSS.

.scroll {
  overflow: auto;
}

.no-scroll {
  display: flex;
  justify-content: center;
  align-items: center;
}

Вот JsFiddle из того, что я сделал: http://jsfiddle.net/97a6fgtp/7/

Я полностью открыт для любого другого фреймворка или чистого способа CSS.

Answer 1

Вы можете попробовать Bootstrap framework для макета, который вы нарисовали.Я бы посоветовал вам попробовать один раз, если вы никогда не работали над этим раньше.

Проверьте это здесь: Компоненты платформы начальной загрузки