Question

我有一个简单的页面布局，其中包含使用flex的垂直居中内容框。

我使用min-height: 70vh;拉伸容器高度以允许内容框垂直居中。

我还有一个页脚，使用flex: 1;将高度差扩展到页面底部。

问题

如果内容框中有足够的内容使其高于页面，则页脚不会被推到底部并随页面滚动。示例：height: 2000px;

如果我删除min-height: 70vh;，页脚会被推到页面底部，因为它应该看起来。

HTML / CSS

<!DOCTYPE html>
<html>
      <head>
            <style>
            html, body {
                  height: 100%;
                  margin: 0;
                  padding: 0;
            }
            body {
                  display: flex;
                  flex-direction: column;
            }
            .header {
                  min-height: 40px;
                  padding: 0.8em 2em;
                  background: black;
                  color: white;
            }
            .flex-container {
                  display: flex;
                  align-items: center;
                  min-height: 70vh;
                  padding: 2em;
                  background: gray;
            }
            .content-box {
                  width: 300px;
                  height: 300px;
                  margin: auto;
                  padding: 2em;
                  text-align: center;
                  background: black;
                  color: white;
            }
            .footer {
                  z-index: 100;
                  position: relative;
                  flex: 1;
                  padding: 2em;
                  background: black;
                  color: white;
            }     
            </style>
      </head>

      <body>
            <div class="header">
                  Header
            </div>

            <div class="flex-container">
                  <div class="content-box">
                        Content Box
                  </div>
            </div>

            <div class="footer">
                  Footer
            </div>

      </body>
</html>

Answer 1

SOLUTION - JSFIDDLE

将flex: 0 0 auto;添加到容器

.flex-container {
  display: flex;
  align-items: center;
  min-height: 70vh;
  padding: 2em;
  background: gray;
  flex: 0 0 auto; /* Added rule */
}

我希望能解决这个问题。

如何使用Flex垂直中心和视口单元？

1 个答案: