28

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

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

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

  main {
    flex: 1 0 auto;
  }
4

8 回答 8

58

您可能没有使用<main>标签

注意：我们使用 flexbox 来构建我们的 html，以便页脚始终位于页面底部。将页面结构保持在 3 个 HTML5 标记内很重要： <header>、、、<main><footer>

于 2015-04-23T09:39:57.667 回答
11

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

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

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>
于 2016-12-06T21:50:32.640 回答
9

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

app-root {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
main {
    flex: 1 0 auto;
}
于 2018-03-29T15:37:27.553 回答
5

Materialise CSS 需要结构：

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

被保存。以下是如何使用 react 实现它：

索引.html

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

index.js

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

应用程序.js

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

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

索引.css

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

main {
  flex: 1 0 auto;
}
于 2018-02-25T19:35:22.080 回答
3

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

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

  #main {
    flex: 1 0 auto;
  }
于 2015-10-17T07:15:29.387 回答
1

对于使用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;
}
于 2017-08-20T01:04:07.493 回答
0

在 css 中的 body 和 main 选择器上放置一个 background-color 并查看这两个元素。如果其中一个没有改变颜色，则可能是它之前的 css 中的问题 - 即。检查上面的样式。

于 2016-08-06T19:57:56.040 回答
0

不知道为什么，但是当我在 Visual Studio 中创建一个 asp.net 应用程序并使用粘性页脚实现物化时，我意识到主标签由于某种原因没有占据空白空间！即使我完全遵循了文档。

为了找出原因，我使用 notepad++ 构建了类似的 html 页面，然后我开始仅从 Visual Studio 页面复制所需的元素（没有额外的脚本和 NuGet 包，它工作得很好。主标签只是占据了空白区域，而页脚却粘在了上面下。

然后，我在 chrome 中打开了两个页面（来自 Visual Studio 的页面，以及来自 notepad++ 的简单页面），并开始比较开发人员工具中每个元素的两个 css。他们是一样的！！！！但是，main 仅限于 Visual Studio 中的内容，但在 notepad++ 中占用空白空间！！！。

我的解决方案是添加 CSS

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

请记住，我的页脚高度为 90 像素。

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

于 2019-07-14T05:55:50.090 回答