固定底栏

当主页内容过少，又想让底部栏置底。

by Robbie Yang

HTML

<body class="fixed">
        <header class="header"></header>
        <div class="container">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
        </div>
        <footer class="footer"></footer>
</body>

CSS

.fixed {
  padding: 0;
  margin: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.container {
  flex:6;
  display: flex;
  align-content: flex-start;
  flex-direction: column;
  background-color: #000;
}

.item {
  flex: 1;
  margin:10px;
  background-color: #ccc;
}

.header, .footer {
  flex:1;
  background-color: #f0f100;
}