使用Flexbox的页脚

尝试使用Flexbox创建页脚时遇到问题。我希望页脚使用align-items: flex-end出现在网页的底部。我在这个网站上找到了一个答案，说我需要为我的代码添加100％的高度，但是当我这样做时，它增加的不仅仅是屏幕的高度，而且使得我需要滚动才能看到页脚。下面是我在做什么（我做了整个页脚绿色，所以我可以看到发生了什么事）的基础：使用Flexbox的页脚

http://jsfiddle.net/kk4jec81/2/

预先感谢您的帮助！

来源

2014-11-05 heelercs

你想让页脚停留在底部吗？如果是这样，你是否希望内容在页面填满时将其推开（要求向下滚动以查看页脚），还是希望页脚始终卡在底部（以便它看不到你的网页上有多少内容）？ – 2014-11-06 20:09:02

我刚刚一直在玩弄你创造的东西...虽然我不认为这是你正在寻找的东西，但我认为可能有些东西会帮助你。 [更新的小提琴]（http://jsfiddle.net/fishgraphics/kk4jec81/3/）让我确切地知道你在找什么，我会看看我能做些什么。 – 2014-11-06 21:22:55

我知道它已经有一段时间，因为有人问，但这里有一个方法来解决这个问题： http://jsfiddle.net/kk4jec81/9/

我添加了一些意见上的CSS，但我所做的是body {display:flex;flex-flow:column;}，然后我删除的100％页脚，最后.menuContainer {margin-top:auto;}。

希望有所帮助。

来源

2015-05-04 14:42:58 Remi

使用Flexbox的页脚

回答

相关问题