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

如所看到的here，我试图重新创建一个粘脚的解决方案 - 没有设置高度。Flexbox的粘页脚和溢出的内容区域

我以相同的方式创建了该网站，但看起来内容在页脚上溢出，页脚简单地是静态的（不太粘！）显然，这个flexbox设置限制了'中段'扩展超出“允许”大小（=窗口 - 页眉 - 页脚），并且不会调整大小以适应内容并压下页脚。

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

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

来源

2013-12-10 toms

与Philip Walton的flexbox sticky footer相反，您并未使用min-height：100vh;'min-height：100％;'。也许这是问题？ – kleinfreund

检查此链接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; 
}

希望这有助于。

来源

2013-12-10 12:55:05 Bobby

虽然我没有在我的代码中找到使用弹性盒的错误，但这确实证明是一个具有相同最终结果的优秀解决方案！谢谢你，干得好！ – toms

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

回答

相关问题