我看过其他教程,了解如何在内容很少时使用 css 网格使页脚粘在底部。但我无法弄清楚。
如果你能帮忙,那就太好了。我正在学习 css grid,我花了几天时间断断续续地试图弄清楚它。
* {
margin: 0;
padding: 0;
color: #ffffff;
font-family: helvetica;
}
body {
background-color: #191919;
}
html body {
height: 100%;
width: 100%;
}
.grid {
min-height: 100%;
display: grid;
grid-template-columns: 10% 40% 40% 10%;
grid-template-rows: 50px 1fr auto;
grid-row-gap: 10px;
grid-template-areas:
"header header header header"
". main main ."
"footer footer footer footer";
}
/*Header*/
.header {
grid-area: header;
background-color: red;
display: grid;
position: fixed;
width: 100%;
grid-template-columns: 40% 60%;
grid-template-areas:
"title navigation" …Run Code Online (Sandbox Code Playgroud)