我怎样才能有一个粘性页脚与我的CSS网格布局？ [英] How can I have a sticky footer with my CSS Grid layout?
本文介绍了我怎样才能有一个粘性页脚与我的CSS网格布局？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我发现这个CodePen解决方案在CSS网格布局中粘滞页脚，但它对我来说有两个问题：
-
min-height：100％和height：100％ - 它仅适用于正文中的两个元素（div和footer）
我需要一些适用于这个HTML结构的东西：
<身体GT;
< nav>某些导航按钮< / nav>
< main>内容< / main>
< footer>版权与东西< / footer>
< / body>
我并不想打包< nav> 和< main> 转换为< div> ，我很乐意做这在纯CSS中。
//不需要！// This is just （＃），函数（）{$（< p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas。Vestibulum tortor quam，feugiat vitae， （）。）appendTo（。content）;}）; code>
html {height：100％;} body {min-height： 100％;显示：网格; 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;白颜色; padding：20px;}
< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =content> < h1>带网格的粘滞页脚< / h1> < p>< button id =add>添加内容< / button>< / p>< / div>< footer class =footer>页脚< / footer>
解决方案
这是一个CSS网格解决方案，但使用目标类更好。
使用网格区域将非常简单：
html，body {
height：100％;
}
body {
margin：0;
}
body {
display：grid;
grid-gap：10px;
身高：100％;
grid-template-columns：1fr;
grid-template-areas：
nav
main
footer;
grid-template-rows：100px 1fr 80px;
}
nav {
grid-area：nav;
}
main {
grid-area：main;
}
footer {
grid-area：footer;
}
nav {
background-color：＃7E57C2;
}
main {
background-color：＃F8BBD0;
}
footer {
background-color：＃7E57C2;
}
https://codepen.io/whisher/pen/vWmvQw
I found this CodePen solution for a sticky footer in a CSS Grid layout, but it has two problems for me:
- It is kinda ugly with
min-height: 100%andheight: 100% - It only works with two elements in the body (a div and a footer)
I need something that works with this HTML structure:
<body>
<nav>Some navigation buttons</nav>
<main>The content</main>
<footer>Copyrights and stuff</footer>
</body>
I don't really want to pack the <nav> and the <main> into a <div>, and I would love to do this in pure 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>
解决方案
Here is a CSS Grid solution, but it's far better using a class for the target.
Using grid-areas this will be very straightforward:
html,body{
height: 100%;
}
body{
margin: 0;
}
body {
display: grid;
grid-gap: 10px;
height: 100%;
grid-template-columns:1fr;
grid-template-areas:
"nav"
"main"
"footer";
grid-template-rows: 100px 1fr 80px;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}
nav {
background-color: #7E57C2;
}
main {
background-color: #F8BBD0;
}
footer {
background-color: #7E57C2;
}
https://codepen.io/whisher/pen/vWmvQw
这篇关于我怎样才能有一个粘性页脚与我的CSS网格布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
