Question

我试图制作一个布局，其中页眉和页脚在其位置会粘，并且内容将具有最小高度，并且如果视口高度太小则显示滚动条。

我在这个codepen上成功执行了它： http://codepen.io/DlafCreative/pen/wzdOEN 来自另一个人。

问题是HTML标记对我使用的框架（Angular2）不方便，因为<header>与<main>处于同一级别，<footer>在外面<prop-wrapper>。

在我的应用中，标题应该在所有页面中保持相同，而页脚应该是动态的。所以我想要的是<header>之前的<prop-wrapper>和<footer>之后的<main>，就像这个分叉的codepen：http://codepen.io/DlafCreative/pen/xEAXxy 这样，我可以更轻松地定义

的内容

现在，我很难与该标记获得相同的行为。欢迎帮助！很多：）

Answer 1

这可能会对你有所帮助。所以它的工作原理如下：

首先，使用以下方法删除浏览器的默认边距：
```
body {
  margin: 0;
}
```
使用prop-body让flexbox成为display: flex。您将flex-direction: column使其垂直弯曲。要填充整个屏幕高度，请height: 100vh：
```
prop-body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
```
将flex: 1添加到prop-wrapper，以便填充header和footer之间的空格。

这是一种简写，意思是：

一个。 flex-grow为1 湾flex-shrink是1

表示此弹性项目的高度将通过增长或缩小来填充剩余空间。

请参阅flex: 1含义here。

flex：相当于flex：1 0。使弹性项目具有灵活性，并将弹性基础设置为零，导致一个项目收到指定比例的 flex容器中的可用空间。如果是flex容器中的所有项目使用这种模式，它们的大小将与指定的成比例 flex因子。

现在您可以轻松查看布局 - 我们正在使用一些嵌套的Flexbox。

body {
  margin: 0;
}
prop-body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
prop-body header {
  background: grey;
  padding: 20px;
}
prop-body prop-wrapper {
  display: flex;
  flex-direction: column;
  background: lightblue;
  flex: 1;
}
prop-body prop-wrapper main {
  overflow-y: auto;
  flex: 1;
}
prop-body prop-wrapper main p {
  padding: 50px;
}
footer {
  display: flex;
  background: pink;
  min-height: 50px;
  height: 10vh;
}
footer .footer-content {
  flex: 1;
  background: plum;
}

<prop-body>
  <header>Header</header>
  <prop-wrapper>
    <main>
      <p>CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
        CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</p>
    </main>
    <footer>
      <div class="footer-content">
        Footer
      </div>
    </footer>
  </prop-wrapper>
</prop-body>

具有自动滚动内容的粘滞页眉和页脚

1 个答案: