Materialise CSS - 粘性页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29703544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Materialize CSS - Sticky Footer
提问by rayu
I followed the steps mentioned here - http://materializecss.com/footer.html- to create a Sticky Footer, but the results are not as expected.
我按照这里提到的步骤 - http://materializecss.com/footer.html- 创建了一个粘性页脚，但结果并不如预期。
I copy pasted the following code to the materialize.min.css file:
我将以下代码复制粘贴到 materialize.min.css 文件中：
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
回答by Kenneth De Win
You're probably not using the <main>tag
你可能没有使用<main>标签
Note: We use flexbox to structure our html so that the footer is always on the bottom of the page. It is important to keep the structure of your page within the 3 HTML5 tags:
<header>,<main>,<footer>
注意：我们使用 flexbox 来构建我们的 html，以便页脚始终位于页面底部。将页面结构保持在 3 个 HTML5 标签内很重要：
<header>,<main>,<footer>
回答by JP_
If you look at the source of the example page you can see how they are doing it: http://materializecss.com/footer.html
如果您查看示例页面的来源，您可以看到他们是如何做的：http: //materializecss.com/footer.html
Structure your HTML like the example below:
像下面的例子一样构造你的 HTML：
<body>
<header></header>
<main></main>
<footer></footer>
</body>
回答by Samet Bask?c?
If you use this footer under Angular component, probably your <header> <main> <footer>tags wrapped by <app-root>tag. In this case You should specify your css like below :
如果您在 Angular 组件下使用此页脚，则可能是您的<header> <main> <footer>标签被标签包裹<app-root>。在这种情况下，您应该像下面这样指定您的 css：
app-root {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
回答by Vadim Aidlin
Materialize CSS requires structure:
Materialize CSS 需要结构：
<body>
<header></header>
<main></main>
<footer></footer>
</body>
to be preserved. Here's how you can implement it with react:
被保存。以下是如何使用 react 来实现它：
index.html
索引.html
<body id="root"></body>
index.js
索引.js
ReactDOM.render(<App/>, document.getElementById('root'))
App.js
应用程序.js
render() {
return (
[
<header>
...
</header>,
<main>
...
</main>,
<footer>
...
</footer>
]
);
Note that we are returning an array to render multiple items on the same level.
请注意，我们正在返回一个数组以在同一级别上呈现多个项目。
index.css
索引文件
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
回答by Shakour Ghafarzoy
just add the (#) before the (main).
只需在 (main) 之前添加 (#)。
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#main {
flex: 1 0 auto;
}
回答by DataDino
For those using Ember.js(v2.14): You'll have to modify the instructions a bit.
对于那些使用Ember.js(v2.14) 的人：您必须稍微修改一下说明。
If your app/template/application.hbs looks like this:
如果您的 app/template/application.hbs 如下所示：
<header>
</header>
<main>
{{outlet}}
</main>
<footer>
</footer>
Then your app/styles/app.js should look like this:
然后你的 app/styles/app.js 应该是这样的：
.ember-view {
display: flex;
flex-direction: column;
}
main {
min-height: 100vh;
flex: 1 0 auto;
}
回答by James
Put a background-color on both body and main selectors in the css and have a look at both elements. If one of them hasn't changed color it could be an issue in the css that came before it - ie. check the styles above it.
在 css 中的 body 和 main 选择器上放置背景颜色，并查看这两个元素。如果其中一个没有改变颜色，它可能是它之前的 css 中的一个问题 - 即。检查它上面的样式。
回答by omarmallat
Not sure why, but when I created an asp.net application in visual studio, and implemented materialize, with sticky footer, I recognized that maintag didn't occupy the blank space for some reason! even I followed exactly the documentation.
不知道为什么，但是当我在 Visual Studio 中创建了一个 asp.net 应用程序，并使用粘性页脚实现实体化时，我意识到由于某种原因主标签没有占据空白空间！即使我完全遵循文档。
To find out why, I build similar html page using notepad++ and I started copying to it the required element only from visual studio page (without extra scripts and NuGet packages, and it works great. maintag simply occupied the blank space and footer is sticking down.
为了找出原因，我使用 notepad++ 构建了类似的 html 页面，然后我开始仅从 Visual Studio 页面复制所需的元素（没有额外的脚本和 NuGet 包，而且效果很好。主标签只是占据了空白空间，而页脚则粘住了）下。
Then, I opened both pages in chrome (the one from visual studio, and the simple one from notepad++), and I started comparing both css for each element in developer tools. They were identical!!!! however, main is limited to content in visual studio, but occupying blank space in notepad++!!!.
然后，我在 chrome 中打开了两个页面（一个来自 Visual Studio，一个来自 notepad++），我开始比较开发人员工具中每个元素的两个 css。他们是一模一样的！！！！但是，main 仅限于visual studio 中的内容，而在notepad++ 中占据空白！！！。
the solution for me was to add in css
我的解决方案是添加 css
main {
min-height: calc(100vh - 90px);
}
keeping in mind that my footer was having a height of 90px.
请记住，我的页脚的高度为 90 像素。
I hope someone can identify the main reason, instead of fixing an unknown
我希望有人能找出主要原因，而不是修复一个未知的
