Bulma/Flexbox页脚不粘在页面底部
我正在用Bulma作为我的CSS框架，用Vue和Laravel做一个应用程序。 我想要一个页脚，留在页面的底部，即使当内容没有‘推’它在那里。 目前，我在自定义CSS中有以下内容:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#app{
flex:1;
}
#app是默认刀片模板中的div，我的应用程序将被注入其中:
<body>
<div id="app">
<index></index>
</div>
</body>
这是我的主要Vue组件，路由组件在其中被注入
<template>
<div>
<Navigation/>
<router-view :key="$route.fullPath"></router-view>
<footer class="footer">Test</footer>
</div>
</template>
当有足够的内容将页脚推到底部或超过底部时，这种操作很好。 但是如果没有，屏幕底部会有一个很大的空隙，页脚会被推到内容的底部。 什么给？
共有1个答案
Flex属性仅在父元素和子元素之间工作。 除了孩子们，就没有遗产了。 所以如果你有这样的东西:
<body>
<div id="app">
<header></header>
<main></main>
<footer></footer>
</div>
</body>
。。。 并且希望始终将页脚钉在底部，则需要如下所示:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#app {
flex: 1;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
有关flex属性范围的详细信息:
- 嵌套flex容器时正确使用flex属性
了解弹性自动边距:
- 将柔性项沿主轴对齐的方法
-
这是我的HTML： 这是我的CSS，仅用于页脚：
-
问题内容： 我的页面只有几行内容。我希望页脚被推到底部。 我不想用 又名 粘性页脚 没有jQuery，这可能吗？ 有什么建议么？ 问题答案： 还有另一种粘页脚]由瑞安既成事实不使用位置固定的：
-
我试图用flexbox做一个简单的设计，但我在IE11上遇到了麻烦。基本上，我想要一个页脚，只有在内容不够高的情况下才会粘到底部。我对Chrome这样做没有异议： 只玩
-
我知道这个问题可能被问了几百次，但遗憾的是，我在这里找到的答案并没有真正帮助我。 例如，我尝试了以下答案： 引导页脚不在底部 但是我仍然有一个问题，当我的页面内容“小”并且没有填满正文/页面容器的整个高度时，页脚只是漂浮在浏览器窗口末端的某个地方。 以下是我的页脚代码： 我正在使用Bootstrap 4.1和Chrome，我的网站上还有一个代码笔： https://codepen.io/anon/
-
这是我的代码，我想我的页脚是静态的在我的html页面底部，我如何修复它？
-
问题内容： 有什么方法可以牢记jQuery Mobile框架的操作方式来修复页面，以便页脚始终与页面底部对齐-不管高度如何。 按照目前的情况，jQuery页面的高度将发生变化，尤其是当设备从纵向旋转为横向时，因此解决方案必须考虑到这一点。 只是为了澄清-我不需要页脚位于视口的底部，而只是为了使默认页面高度不低于视口高度而工作。 谢谢。 问题答案： 您可以在CSS文件中添加此代码： 因此，页面数据角
-
我有多个div和其中大多数是浮在左边。如果我在页面上放置一个绝对和底部0px的位置，页脚将跳到页面的一半，并坐在内容的顶部。以下是我的HTML： 下面是我的CSS：
-
问题内容： 我正在尝试实现CSS粘贴页脚。 问题是存在内容DIV超出其容器的范围，导致滚动条不理想，并且挂在页面div上的背景图像没有扩展文档的整个高度。 这是我的HTML： 这是CSS： 问题答案： 很棒的 CSS Tricks 网站在其“ 代码段”区域中有一个“粘性页脚”的代码段 http://css-tricks.com/snippets/css/sticky-footer/ 或使用jQue