html - 页眉和页脚之间的 100% 高度包装(第一部分设置为 100% 高度)

Question

我需要创建一个页面，在页眉和页脚元素之间有一个 100% 的包装器。包装器是一个通用内容 View ，我将在其中添加模板。除了 wrapper 的高度为 100% 之外，我还需要 wrapper 中的第一部分也具有 100% 的高度。

主要问题是我无法将页脚相对放置在包装器之后。它停留在中间的某个地方。例如，参见 fiddle 。

HTML

<header ui-view="header"></header> <!--Fixed Height/Relative-->
    <div id="wrapper" ui-view="wrapper"> <!--100% Height/Relative-->
        <section></section> <!--100% Height/Relative-->
        <section></section> <!--Auto Height Based On Content/Relative-->
        <section></section> <!--Auto Height Based On Content/Relative-->
    </div>
<footer ui-view="footer"></footer> <!--Fixed Height/Relative-->

CSS

body{
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
}
html{
  height: 100%;
}
div{
  position: relative;
  height: 100%;
  width: 100%;
}
section:first-child{
  height: 100%;
}
section{
  position: relative;
  display: block;
  height: 400px;
  width: 100px;
  border: 1px solid black;
}
header{
  position: relative;
  height: 100px; width: 100%; background: red;
}
footer{
  position: relative;
  height: 100px; width: 100%; background: red;
}

JSFiddle

Answer 1

我相信您的部分周围的 div 会给您带来一些麻烦。看看下面的片段。如果您只将第一部分和标题放在该 div 中，则可以通过将高度 100% 放在该 div 中来实现您想要的效果。

请注意，如果没有该 div，您的 :first-child 伪选择器将无法工作，因为该部分不再是其父级的第一个子级( header 是)。所以我简单地为它添加了一个 ID，以便我可以在 CSS 中引用它。

现在 div 是高度的 100%，header 是固定高度，section1 100% 填充了 div 的剩余部分。

body{
  margin: 0;
  padding: 0;
  height: 100%;
  background:green;
}
html{
  height: 100%;
}
div{
  height: 100%;
  width: 100%;
  background: pink;
}

section {
  display: block;
  height: auto;
  width: 100%;
  border: 1px solid black;
}
section#section1 {
  height: 100% !important;
}

header{
  height: 50px; width: 100%; background: red;
}
footer{
  height: 50px; width: 100%; background: blue;
}

<div>
<header></header>
<section id='section1'>section1</section>
</div>
<section>section2</section>
<section>section3</section>
<footer></footer>

您在 body 上设置的 height:100% 是导致页脚元素位于页面中间的原因。请记住，“100%”是“窗口高度的 100%”，所以要小心。干杯。