问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何使用我的 CSS 网格布局设置粘性页脚？

社区维基
1
新手上路，请多包涵

我在 CSS 网格布局中找到了用于粘性页脚的 CodePen 解决方案，但它对我来说有两个问题：

  1. 它有点丑 min-height: 100% 和 height: 100%
  2. 它仅适用于正文中的两个元素（一个 div 和一个页脚）

我需要一些适用于这种 HTML 结构的东西：

 <body>
    <nav>Some navigation buttons</nav>
    <main>The content</main>
    <footer>Copyrights and stuff</footer>
</body>

我真的不想将 <nav> 和 <main> 成 <div> ，我很乐意在纯 CSS 中这样做。

 // Not required!
// This is just to demo functionality.

$("#add").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content");
});

 html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}

.content {
  padding: 20px;
}

.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: 16px Sans-Serif;
}

h1 {
  margin: 0 0 20px 0;
}

p {
  margin: 0 0 20px 0;
}

.footer {
  background: #42A5F5;
  color: white;
  padding: 20px;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <h1>Sticky Footer with Grid</h1>
  <p><button id="add">Add Content</button></p>
</div>

<footer class="footer">
  Footer
</footer>

原文由 Mitiko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcsscss-grid
阅读 336
2 个回答
得票最新
社区维基
1
✓ 已被采纳

这是一个 CSS Grid 解决方案，但为目标使用一个类要好得多。

使用网格区域这将非常简单：

 html, body {
    margin: 0;
    height: 100%;
}
body {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "main" "footer";
    grid-template-rows: 100px 1fr 80px;
}
nav {
    background-color: #7E57C2;
    grid-area: nav;
}
main {
    background-color: #F8BBD0;
    grid-area: main;
}
footer {
    background-color: #7E57C2;
    grid-area: footer;
}

 <body>
    <nav>Some navigation buttons</nav>
    <main>The content</main>
    <footer>Copyrights and stuff</footer>
</body>

原文由 Whisher 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

诀窍是使用：

min-height: 100vh; grid-template-rows: auto auto 1fr; 与…

align-self: end; 用于页脚。

如果我们添加左/右页边距，将 <nav> 放在页眉中，为页脚内容添加页边距，并为主要内容假设另一个网格：

 body {
    display: grid;
    grid-gap: 1em 0;
    grid: auto auto 1fr / 10vw 1fr 10vw;
    margin: 0;
    min-height: 100vh;
}

header {
    background-color: #7E57C2;
    grid-column: 2;
}

main {
    background-color: #F8BBD0;
    display: grid;
    grid-column: 2;
}
footer {
    background-color: #7E57C2;
    align-self: end;
    grid-column: 2;
    margin-bottom: 1em;
}

 <body>
    <header>Some navigation buttons</header>
    <main>The content</main>
    <footer>Copyrights and stuff</footer>
</body>

这具有以前的解决方案所缺乏的简洁性。

使用 _常青浏览器_，无需使事情复杂化。

以前的答案不那么可维护。陷阱包括：

  • 强制页眉/页脚固定像素尺寸。
  • 使用网格区域而不是更简单的网格定义。将 grid-template-rows 和 grid-template-columns 组合成一行有奖励点。
  • 广泛的“宽度/高度/最小高度：100%”定义在 html 和 body 标签上无处不在。这在 IE6 盛行但现代浏览器不需要时可能有意义。
  • 使用 flexbox 布局。这不是未来的布局引擎。 CSS 网格将是我五年后想要维护的东西。
  • 使用像素和百分比。什么是像素？谁知道什么时候有视网膜屏幕和高分辨率手机屏幕。我以前喜欢像素，但还有其他更有意义的单位，“vw/vh/vmin/vmax”加上“em/rem”。对于 CSS 网格，百分比测量也即将过时，所以最好改掉这个习惯。

原文由 Henry‘s Cat 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题