Question

我无法将页脚放置在页面的末尾。如果页面内容较少，则该页面不会放在底部。页脚没有固定的高度。这是我的代码。

$ pip install --user datetime

Usage:   
  pip install [options] <requirement specifier> [package-index-options] ...
  pip install [options] -r <requirements file> [package-index-options] ...
  pip install [options] [-e] <vcs project url> ...
  pip install [options] [-e] <local project path> ...
  pip install [options] <archive url/path> ...

--user option does not take a value

Answer 1

因此，这基本上将页面设置为占据整个窗口，然后将页脚粘贴到其底部。不管大小如何，都贴在底部。

html {
  position: relative;
  min-height: 100vh;
}

body {
  margin: 0 0 100px;
}

footer {
  background-color:#e5e5e5;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

Answer 2

您是否考虑过为此使用CSS Grid？可以在 here 中找到有关CSS网格的更多信息。

body {
    height: 100vh;
    background-color: white;
    display: grid;
    grid-template-rows: 100px auto 30px;
}

header {
    background-color: steelblue;
}

main {
    height: 200px;
    background-color: darkgreen;
}

footer {
    background-color: gold;
}

<body>
    <header>
        I'm the header!
    </header>
    <main>
        I'm the main!
    </main>
    <footer>
        I'm the footer!
    </footer>
</body>

页脚位置，没有固定高度

2 个答案: