垂直堆叠 3 个 DIV 以填充整个屏幕，页面静态边距（无滚动条）

Question

我正在尝试垂直堆叠 3 DIVs，其中每个 DIV 占据大约三分之一 (33.33%) 的垂直区域，因此最终，它们三个都会填满整个屏幕。但与此同时，我希望在所有三个 没有滚动条 的情况下都留出 8px 的边距。如下图所示...

example image

所以最后，我有一个响应式布局，垂直分为 3 个部分，所有部分都有边距 （没有出现滚动条）

这是我当前的代码：

body {
  margin: 8px;
  background: red;
}

.header {
  width:  100%;
  height: 33.33%;
  background: #fff;
}

.content {
  width:  100%;
  height: 33.33%;
  background: #ccc;
}

.footer {
  width: 100%;
  height: 33.33%;
  background: #777;
}

<div class="container">
  <div class="header">
    header
  </div>

  <div class="content">
    content
  </div>

  <div class="footer">
    footer
  </div>
</div>

出于某种原因，此代码在 (https://liveweave.com/) 中运行良好，但在 chrome 浏览器

中不起作用

Answer 1

您可以为此使用 flexbox - 注意 flex-direction column 的使用 - 这允许您创建垂直堆叠的 divs。

这让你的 3 div layout.with 每个 div 占据视口高度的三分之一减去 16px（从 8px 顶部和底部），通过删除16px - 你不会得到滚动条。

因为您使用的是 flex - 您不必指定 33.334% - 每个 div 简单地增长以填充 space 并且因为有 3 个 - 每个都有 flex-grow样式 - 它们等于视口高度的三分之一。

body, html {
  padding:0;
  margin: 0;
}
.container {
  padding: 8px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 16px);
  background: red;
}

.header {
  background: #fff;
  flex-grow: 1;
  display: block
}

.content {
  width:  100%;
  background: #ccc; 
  flex-grow: 1;
  display: block
}

.footer {
  background: #777;
  flex-grow: 1;
  display: block
}

<div class="container">
  <div class="header">
    header
  </div>

  <div class="content">
    content
  </div>

  <div class="footer">
    footer
  </div>
</div>

body, html {
  padding:0;
  margin: 0;
}

.container {
  padding: 8px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 16px);
  background: red;
}

header {
  background: #fff;
  flex-grow: 1;
  display: block
}

main {
  width:  100%;
  background: #ccc; 
  flex-grow: 1;
  display: block
}

footer {
  background: #777;
  flex-grow: 1;
  display: block
}

<div class="container">
  <header>
    header content
  </header>

  <main>
    content
  </main>

  <footer>
    footer content
  </footer>
</div>

垂直堆叠 3 个 DIV 以填充整个屏幕，页面静态边距（无滚动条）

Vertically stack 3 DIVs to fill entire screen, with page static margin (No Scroll Bar)

html

css

frontend

web-deployment