Flexbox 粘性页脚和溢出的内容区域答案

【问题标题】：The Flexbox sticky footer and the overflowing content areaFlexbox 粘性页脚和溢出的内容区域
【发布时间】：2013-12-27 22:04:35
【问题描述】：

正如 here 所见，我正在尝试为粘性页脚重新创建解决方案 - 没有设置高度。

我以同样的方式创建了网站，但内容似乎不断溢出页脚，而页脚只是静态的（不那么粘！）显然，这个 flexbox 设置限制了“中间部分”的扩展超出“允许的”大小（= 窗口 - 页眉 - 页脚），并且它不会调整大小以适应内容并向下推页脚。

我尝试更改所有内容的溢出设置，我尝试更改中间部分和中间部分本身的元素的显示选项。没找到问题！！

现在我意识到如果我只定义页脚的高度，我可以用一百种不同的方法来解决这个问题。但我尽量不这样做。

这里有一些简化的 HTML 来展示我的结构

<body class="Site">
<header><div id="header>...</div></header>
<div id="mid" class="Site-content">
    <div id="links" class="fadein">
        <ul><li>..</li></ul>
    </div>
    <div id="content" class="content fadein">
    text text text
    </div>

</div>
<footer>
    <div id="footer"></div>
</footer>
</body>

以及相关的css

div#header {
    position:relative;
    display:block;
    top:0px;
    left:0px;
    margin:0 auto 5px auto;
    width:auto;
}
div#mid {
    display:block;
    width:100%;
    height:auto;
    position: relative;
    background:#C69;
}
        div#content {
            margin-left:120px;
            width:720px;
            padding: 25px;
            background:#0F9;
        }

        div#links {
            position:absolute;
            left:0px;
            top:0px;
            width:100px;
            padding: 5px;
            margin-left:10px;
            margin-top:35px;
            background:#0C6;
        }
.Site {
    min-height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.Site-content {
    flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
}
footer {
    clear:both;
    width:auto;
    padding:10px;
}

您的巧妙解决方案将不胜感激！

【问题讨论】：

与 Philip Walton 的 flexbox 粘页脚相反，您使用的不是min-height: 100vh;，而是min-height: 100%;。也许这就是问题所在？

标签： html css overflow sticky-footer flexbox

【解决方案1】：

查看此链接http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ 以了解如何使用 flexbox 实现粘性页脚。

我个人正在使用这种技术http://www.joshrcook.com/a-responsive-sticky-footer/，它是在不使用 flexbox 的情况下完成的。

<body>
    <div class="container">
        <!-- content here -->

    <footer>
        <!-- content for footer -->
    </footer>
    </div>
</body>

而且对于 CSS 来说非常简单

html,
body {
    height: 100%;
}
.container {
    display: table;
    height: 100%;
    width: 100%;
}
footer {
    display: table-row;
    height: 1px;
}

希望对您有所帮助。

【讨论】：

虽然我没有在我的代码中发现使用 flex box 的错误，但事实证明这是一个很好的解决方案，最终结果相同！谢谢你，干得好！