Question

我确信这很容易，而且我只是想念一些东西，但我想不出这点来挽救我的生命。

我有一个网页，它以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;
}

Answer 1

首先，您确实应该清理代码以确保其有效并正确缩进，这将使发现错误变得更加容易。附带说明，您的代码中也没有<header>。

其次，您在display: grid;样式中缺少.grid，这将使它根本无法工作。

所有这些都清理完后，我从您的position: absolute;样式中删除了bottom: 0;和footer，它似乎正常工作。

这是我的工作示例：https://codepen.io/CWSites/pen/jdVeNX

将页脚放在身体底部，但保持在同一列中

1 个答案: