如何在一个屏幕上编写响应式单页应用程序？

Question

我正在尝试使用以下架构编写单个屏幕内的单页应用程序：

• 一个固定的标题有：

  • 两列（左侧为 1/3，右侧为 2/3）：
    • 左侧的徽标
    • 右侧的面包屑。

• 一个固定的身体有：

  • 两列（左侧为 1/3，右侧为 2/3）：
    • 带有滚动条的垂直容器：
      • 一个链接块
      • 一组社交媒体链接、信用等（应始终位于底部，作为页脚）
    • 带有滚动条的内容容器

实际布局如下图所示：https://ibb.co/2ybxxdy

我已经尝试过使用 Bulma css 框架和一些自定义 css。

.scroll {
  overflow: auto;
}

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

这是我所做的 JsFiddle：http://jsfiddle.net/97a6fgtp/7/

我对任何其他框架或纯 css 方式完全开放。

Answer 1

您可以尝试 Bootstrap 框架为您绘制的布局。 如果您以前从未使用过，我建议您尝试一次。

在这里查看：Bootstrap framework Components