Question

我需要创建一个页面，我在页眉和页脚元素之间有100％的包装。包装器是一个通用内容视图，我将添加模板。除了100％高度的包装外，我还需要在包装纸上有第一部分，高度为100％。

主要问题是我无法在包装后相对定位页脚。它停留在中间的某个地方。比如小提琴。

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伪选择器将无法工作，因为该部分不再是其父级的第一个子节点（标题为）。所以我添加了一个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>

您在height:100%上设置的body是导致页脚元素位于页面中间的原因。请记住，'100％'是'窗户高度的100％'，所以要小心。欢呼声。

页眉和页脚之间的100％高度包装（第一部分设置为100％高度）

1 个答案: