我确信这很容易，我只是错过了一些东西，但我无法解决这个问题来挽救我的生命。
我有一个网页，它设置为 4 列网格格式 (5% 45% 45% 5%)，我想让页脚位于显示窗口的底部，或者含量，以较低者为准。我已尝试将位置设置为绝对位置并将底部设置为 0，这会将页脚移动到底部，但仅将其定位在第一列中，尽管网格区域已设置为第二列和第三列。
我需要做什么才能将页脚保持在底部，但留在我分配给它的列中？不，我不想要静态或粘性页脚。
HTML:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>TITLE</title>
</head>
<body>
<div class="grid">
<header>HEADER</header>
<nav>NAV</nav>
<div class="content1">
<h2>HEADLINE1</h2>
<p>CONTENT1</p>
</div>
<div class="content2">
<h2>HEADLINE2</h2>
<p>CONTENT2</p>
</div>
<div class="content3">
<h2>HEADLINE3</h2>
<p>CONTENT3</p>
</div>
<footer>FOOTER</footer>
</div>
</body>
</html>
CSS:
body, html {
margin: 0;
padding: 0;
min-width: 100%;
width: 100%;
max-width: 100%;
min-height: 100%;
height: 100%;
max-height: 100%;
font-family: Verdana, Helvetica, sans-serif;
background-color: white;
}
.grid {
display: grid;
grid-template-columns: 5% 45% 45% 5%;
grid-template-rows: auto auto auto auto auto;
grid-template-areas:
". header header ."
". content1 content2 ."
". content1 content2 ."
". content3 content3 ."
". footer footer .";
grid-column-gap: 1em;
grid-row-gap: .75em;
}
footer {
grid-area: footer;
text-align: center;
border: none;
position: absolute;
bottom: 0;
}
p {
text-align: justify;
color: black;
}
.content1 {
grid-area: content1;
}
.content2 {
grid-area: content2;
}
.content3 {
grid-area: content3;
}
.header {
grid-area: header;
z-index: 999;
}
最佳答案
首先你真的应该清理你的代码以确保它是有效的并且缩进正确，这将使发现错误变得容易得多。作为旁注，您也没有 <header>代码中的任何位置。
其次，你错过了display: grid;在你的 .grid 里面会阻止它工作的样式。
所有这些都清理干净后，我删除了 position: absolute;和 bottom: 0;来自你的 footer样式，它似乎工作得很好。
关于html - 将页脚保持在正文底部，但保持在同一列中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54434116/