解决方案

Question

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

现在，当我设置主体，主要div达到100％高度时，页脚会被截断。这是一个内容区域，见plnkr

＆＃13;

<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>

＆＃13;

[ enter image description here

我错过了什么？

Answer 1

只需添加此css：

body {
    margin: 0;
}

body默认为margin 8px。

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

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

body:focus {
    outline: none;
}

从W3C - HTML body Tag复制。

Answer 2

以下是您的首选起点：

它提供了一个完全响应的页眉和页脚灵活设计。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

您想要删除身体标签上的边距。

为了确保您能够在每个浏览器中查看所谓的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>

Flex布局100％高度太高

3 个答案:

解决方案