Question

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

我以相同的方式创建了网站，但似乎内容不断溢出页脚，页脚只是静态的（不那么粘！）显然，这个flexbox设置正在限制“mid section”扩展超出“允许”大小（= Window - header-footer），并且它不会调整大小以适应内容并按下页脚。

enter image description here

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

现在我意识到如果我只是定义了页脚的高度，我可以解决这一百种不同的方法。但我不想这样做。

这是一些显示我的结构的简化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;
}

非常感谢您的巧妙解决方案！

Answer 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;
}

希望得到这个帮助。

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

1 个答案: