实现CSS粘性页脚flex属性不起作用

当我将Materialize here的粘性页脚所示的css属性应用时，我的主要元素的高度最高可达33000px。页脚显示正常，但在其上方是空白的（推测长度约为33000像素）。这些元素按照标题正确排列，然后是主要元素，然后是页脚元素。实现CSS粘性页脚flex属性不起作用

HTML：

<body> 
    <header> 
     Header stuff 
    </header> 
    <main> 
     Main stuff 
    </main> 
    <footer> 
     Footer stuff 
    </footer> 
</body>

青菜：

body 
    display: flex 
    min-height: 100vh 
    flex-direction: column 

main 
    flex: 1 1 auto

来源

2015-07-20 neurodynamic

我能够通过将母弯曲的CSS的包装DIV，而不是body元素来解决这个问题，就像这样：

html：

<body> 
    <div class="page-flexbox-wrapper"> 
    <header> 
     Header stuff 
    </header> 
    <main> 
     Main stuff 
    </main> 
    <footer> 
     Footer stuff 
    </footer> 
    </div> 
</body>

SASS：

.page-flexbox-wrapper 
    display: flex 
    min-height: 100vh 
    flex-direction: column 

main 
    flex: 1 1 auto

来源

2015-07-20 14:47:19 neurodynamic

哥们我应该给你买比萨饼这个！ +1起！ – ThatAwesomeCoder

我有同样的问题，其他发布的解决方案并没有为我工作，但是这丝毫。（1.1.10），fourseven：scss（3.4.1），诗：materialize-scss（1.97.3_2），kadira：流路由器（2.10.0），kadira：blaze-布局（2.3.0）

materialize.scss

.site { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
} 

.site-content { 
    flex: 1; 
}

主的layout.html

<template name="masterLayout"> 
<div class="site"> 
    <header> 
     {{> Template.dynamic template=navigation}} 
    </header> 
    <main class="site-content"> 
     {{> Template.dynamic template=main}} 
    </main> 
    <footer class="page-footer"> 
     {{> Template.dynamic template=footer}} 
    </footer> 
    </div> 
</template>

routes.js

FlowRouter.route('/', { 
    name: 'home', 
    action: function(params, queryParams) { 
    BlazeLayout.render('masterLayout', { 
     toolbar: 'toolbar', 
     main: 'blog', 
     navigation: 'navigation', 
     footer: 'footer' 
    }); 
    } 
});

来源

2016-01-06 22:39:22 Mozfet

感谢您的回答！但是对渲染函数中的“toolbar：toolbar”很好奇？布局/模板在哪里？ – Samudra

Urm，我不知道......它一定是迟到了......我看到它在那里，但它在我的代码中没有其他地方......必须是一个实验的遗物...... – Mozfet

如果你看一下例子页面的源代码，你可以看到他们是如何做的： http://materializecss.com/footer.html

下结构正常工作对我来说：

<body> 
    <header></header> 
    <main></main> 
    <footer></footer> 
</body>

来源

2016-12-06 21:40:50

除非我失去了一些东西，这是我引用的不相同的链接和布局，因为不在问题中工作。我最初问的原因是因为提供的例子没有按预期工作。 – neurodynamic

对我来说工作很好。这个问题一定是由你的代码的另一部分引起的。 –

实现CSS粘性页脚flex属性不起作用

回答

相关问题