Question

如何将绝对定位的元素放到页面底部？

我想在我的页面上创建一个“封面”。为了使它覆盖整个页面，我使用“position：absolute”将四个方向中的每一个设置为0.但是，当页面内容的高度大于客户端窗口的高度时，封面高度为客户端高度，而不是整页的高度。

<style>

#a {
    width: 100px;
    height: 2000px;
    background: red;
}

#b {
    position: absolute;
    bottom: 0;
    width: 200px;
    height: 200px;
    background: blue;
}

</style>

<div id=a></div>

<div id=b></div>

我首先尝试将此问题诊断为<body></body>身高的问题。从<body></body>未扩展到页面底部的事实来看，大多数问题都是这样的。但是，您会注意到，在此示例中，实体确实将2000px扩展到页面底部。

请注意，position: fixed不起作用，因为用户仍然可以滚动，封面内的内容应滚动。

Answer 1

我明白了！

您只需要将元素的“包含块”作为正文，因此您只需要将<body></body>设置为position: relative

Answer 2

使用<session-config> <session-timeout>60</session-timeout> <cookie-config> <http-only>true</http-only> <secure>true</secure> </cookie-config> <tracking-mode>COOKIE</tracking-mode> </session-config>始终覆盖整个页面。

Answer 3

如果您想要覆盖整个页面，请使用position: fixed。这将使封面“固定”到视口。

#cover {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

Answer 4

position:fixed确实提供了您正在寻找的内容，因为您可以看到内容正在向下滚动。但是你正在寻找的是，如果封面页在整个身体高度上没有给它固定的高度，那么它只能通过javascript完成。

#a {
  width: 100px;
  height: 2000px;
  background: red;
}

#b {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}

<div id=a>
Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content Random content   
</div>

<div id=b></div>

Answer 5

如果您的<body>是您想要的最终高度而您不知道约束，那么我会设置background-image并让浏览器计算它：

body {
  background-image: url(/your/path/to/image.jpg);
  background-size: cover; /* This line is the magic. It fits the image to the size of the container, in this case, <body> */
  background-position: center;
}

此方法将切断任何溢出。您可以使用background-size: contain;解决此问题，但是如果维度不匹配，您还需要设置background-color以确保它与网站匹配。

位置：绝对;底部：0;转到页面底部

5 个答案: