【问题标题】：Flex Layout 100% Height is too muchFlex Layout 100% 高度太大
【发布时间】：2017-01-27 18:03:45
【问题描述】：

我在玩 flexout。我想创建页眉内容区域和页脚的典型布局

现在，当我将主体设置为 100% 高度时，页脚被截断。这是一个内容区，看到这个plnkr

<html style="height: 100%">

<body style="height: 100%">
  <div style="height:100%;display:flex;background-color: lightblue;flex-direction:column">
    <div style="width: 600">Header</div>
    <div style="width: 500;display: flex;height: 100%">
      <div style="width:300">Nav</div>
      <div>Content</div>
    </div>
    <div style="height:50px">footer</div>
  </div>
</body>

</html>

[

我错过了什么？

【问题讨论】：

标签： css flexbox

【解决方案1】：

只需添加这个 css：

body {
    margin: 0;
}

body 默认有一个margin 或8px。

大多数浏览器将显示具有以下默认值的元素：

body {
    display: block;
    margin: 8px;
}

body:focus {
    outline: none;
}

复制自W3C - HTML body Tag。

【讨论】：

【解决方案2】：

这里有一个适合你的起点：

它提供了带有页眉和页脚的完全响应式弹性设计。

body,html{
  margin:0;padding:0;
  height:100%;
}
.Flx{
  display:-webkit-flex;
  display:-ms-flex;
  display:flex;
}
.Wrap{
  margin:0 auto;
  height:100%;
  max-width:600px;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
}
.Header{
  -webkit-flex:0 50px;
  -ms-flex:1;flex:0 50px;
  background:#ccc;
}
.Content{
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
}
nav{
  -webkit-flex:0 1 300px;
  -ms-flex:0 1 300px;
  flex:0 1 300px;
  background:#eee;
}
.Footer{
  -webkit-flex:0 50px;
  -ms-flex:1;flex:0 50px;
  background:#ccc;
}

<div class="Flx Wrap">
  <div class="Flx Header">Header</div>
  <div class="Flx Content">
    <nav class="Flx">Nav</nav>
    <div>Content</div>
  </div>
  <div class="Flx Footer">footer</div>
</div>

【讨论】：

感谢该提示。这是该场景的一个很好的起点。但我的问题是要理解为什么它有这个偏移量。所以我将另一个帖子标记为答案（用边距解释）
是的，如果您不指定，所有浏览器都使用默认值。我建议使用诸如 meyers:meyerweb.com/eric/tools/css/reset 之类的 CSS 重置，以确保浏览器在您开始之前执行您所期望的操作。

【解决方案3】：

您想删除 body 标签上的边距。

为了确保它在每个浏览器中的外观都相同，您可以使用所谓的css reset。

浏览器可以有不同的默认样式。这个简短的 css 文件会将所有默认样式重置为相同。

解决方案

body {
  margin: 0;
}

<html style="height: 100%">

<body style="height: 100%">
  <div style="height:100%;display:flex;background-color: lightblue;flex-direction:column">
    <div style="width: 600">Header</div>
    <div style="width: 500;display: flex;height: 100%">
      <div style="width:300">Nav</div>
      <div>Content</div>
    </div>
    <div style="height:50px">footer</div>
  </div>
</body>

</html>

【讨论】：