實現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屬性不起作用

回答

相關問題