Materialise CSS - 粘性页脚

Question

我按照此处提到的步骤 - http://materializecss.com/footer.html - 创建了一个粘性页脚，但结果并不如预期。

我将以下代码复制并粘贴到 materialize.min.css 文件中：

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

  main {
    flex: 1 0 auto;
  }

Answer 1

您可能没有使用 <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>

Answer 2

只需在 (main) 之前添加 (#)。

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

  #main {
    flex: 1 0 auto;
  }

Answer 3

在 css 中的 body 和 main 选择器上添加背景颜色，然后查看这两个元素。如果其中一个没有改变颜色，则可能是它之前出现的 css 中的问题 - 即。检查上面的样式。

Answer 4

如果您查看示例页面的源代码，您可以了解他们是如何做到的： http://materializecss.com/footer.html

像下面的示例一样构建您的 HTML：

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

Answer 5

对于那些使用 Ember.js (v2.14) 的用户：您必须稍微修改一下说明。

如果你的 app/template/application.hbs 看起来像这样：

<header>
</header>

<main>
{{outlet}}
</main>

<footer>
</footer>

那么你的 app/styles/app.js 应该是这样的：

.ember-view {
  display: flex;
  flex-direction: column;
}

main {
  min-height: 100vh;
  flex: 1 0 auto;
}

Answer 6

实现 CSS 需要结构：

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

待保存。以下是如何使用 React 实现它：

index.html

<body id="root"></body>

index.js

ReactDOM.render(<App/>, document.getElementById('root'))

App.js

render() {
return (
  [
    <header>
      ...
    </header>,
    <main>
      ...
    </main>,
    <footer>
      ...
    </footer>
  ]
);

请注意，我们返回一个数组以在同一级别呈现多个项目。

index.css

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

main {
  flex: 1 0 auto;
}

Answer 7

如果您在 Angular 组件下使用此页脚，可能是您的 <header> <main> <footer> 标签被 <app-root> 标签包裹。在这种情况下，您应该像下面这样指定您的 css ：

app-root {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
main {
    flex: 1 0 auto;
}

Answer 8

不知道为什么，但是当我在 visual studio 中创建一个 asp.net 应用程序并实现实体化时，我识别出了 main 标签由于某种原因没有占据空白space！甚至我也完全按照文档进行操作。

为了找出原因，我使用 notepad++ 构建了类似的 html 页面，然后我开始只从 visual studio 页面复制所需的元素（没有额外的脚本和 NuGet 包，而且效果很好. main 标签只是占据了空白 space 并且页脚向下移动。

然后，我在 chrome 中打开了两个页面（来自 visual studio 的页面和来自 notepad++ 的简单页面），然后我开始比较 css 中每个元素的开发人员工具。他们是一模一样的！！！！但是在visual studio中main只限于内容，而在notepad++中却占据空白space!!!.

我的解决方案是添加 css

main {
    min-height: calc(100vh - 90px); 
}

记住我的页脚有 90 像素的高度。

我希望有人能找出主要原因，而不是修复一个未知数

Materialise CSS - 粘性页脚

Materialize CSS - Sticky Footer

css

materialize

material-design