我看过其他有关如何在内容很少的情况下使用css网格将页脚粘到底部的教程。但我无法弄明白。
如果你能提供帮助,那就太好了。我正在学习css网格,我花了几天时间试图解决这个问题。
* {
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"
}
.title {
grid-area: title;
text-align: center;
}
.navigation {
grid-area: navigation;
}
.title .navigation {
}
/*Main*/
.main {
margin-top: 50px;
grid-area: main;
background-color: #323232;
border-radius: 10px;
}
/*Footer*/
.footer {
grid-area: footer;
background-color: black;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Mortrix</title>
</head>
<body>
<div class="grid">
<!-- Header -->
<div class="header">
<div class="title"> <h1>Mortrix</h1></div>
<div class="navigation">Navigation</div>
</div>
<!-- Main -->
<div class="main">
This is some content
</div>
<!-- Footer -->
<div class="footer">Footer
</div>
</div>
</body>
</html>
我知道这个问题已被提出,但我正在寻找一个修复我自己的代码。对不起,如果我错过了明显的事
您只需使用视口高度(vh)即可将页脚固定在窗口底部。此单位基于视口的高度。值1vh等于视口高度的1%。所以在这里我只设置.grid的最小高度:100vh而不是min-height:100%
* {
margin: 0;
padding: 0;
color: #ffffff;
font-family: helvetica;
}
body {
background-color: #191919;
}
html body {
height: 100%;
width: 100%;
}
.grid {
min-height: 100vh;
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"
}
.title {
grid-area: title;
text-align: center;
}
.navigation {
grid-area: navigation;
}
.title .navigation {
}
/*Main*/
.main {
margin-top: 50px;
grid-area: main;
background-color: #323232;
border-radius: 10px;
}
/*Footer*/
.footer {
grid-area: footer;
background-color: black;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Mortrix</title>
</head>
<body>
<div class="grid">
<!-- Header -->
<div class="header">
<div class="title"> <h1>Mortrix</h1></div>
<div class="navigation">Navigation</div>
</div>
<!-- Main -->
<div class="main">
This is some content
</div>
<!-- Footer -->
<div class="footer">Footer
</div>
</div>
</body>
</html>
超简单解决方案:
将以下代码添加到.footer
类:
position:absolute;
bottom:0;
left:0;
right:0;
完整的页脚类看起来像:
.footer {
grid-area: footer;
background-color: black;
position:absolute;
bottom:0;
left:0;
right:0;
}
这就是你所要做的一切!以下是它的呈现方式:
* {
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"
}
.title {
grid-area: title;
text-align: center;
}
.navigation {
grid-area: navigation;
}
.title .navigation {
}
/*Main*/
.main {
margin-top: 50px;
grid-area: main;
background-color: #323232;
border-radius: 10px;
}
/*Footer*/
.footer {
grid-area: footer;
background-color: black;
position:absolute;
bottom:0;
left:0;
right:0;
}
<div class="grid">
<!-- Header -->
<div class="header">
<div class="title"> <h1>Mortrix</h1></div>
<div class="navigation">Navigation</div>
</div>
<!-- Main -->
<div class="main">
This is some content
</div>
<!-- Footer -->
<div class="footer">Footer
</div>
</div>