html - 将页脚放在最底部，只有绝对内容-6ren

html - 将页脚放在最底部，只有绝对内容

转载作者：行者123 更新时间：2023-11-28 16:19:14

现在我创建的页面或多或少只有固定的和绝对的内容。第一个视口(viewport)非常容易创建，因为它的最大高度为 100vh。所以我将第二部分的样式设置为 margin-top: 100vh。现在一切正常。但是第二部分不再是 100vh 高度了。高度或多或少是未知数。

现在我想创建一个新的部分或页脚。但问题是它停留在页面顶部。就像没有其他内容一样。我认为这是因为 position: absolute 在所有其他元素上。另外 position: absolute 和 bottom: 0 对页脚不起作用。然后它只是粘在视口(viewport)底部而不是整个页面。

我如何设计我的下一个内容以使其低于其他内容？

我之所以使用 position: absolute 是为了一个固定的背景，用 css 创建。也许有一种更聪明的方法可以让内容在没有绝对位置的情况下与背景重叠？

我认为这就是您解决我的问题所需的相关代码:

body {
  padding: 0;
  margin: 0;}
.first {
  position: absolute;
  color: white;
  height: 100vh;
  width: 100vw;
}

.second {
  position: absolute;
  margin-top: 110vh;
  color: white;
  width: 100vw;
}

footer {
  position: absolute;
  background-color: coral;
  z-index: 200;
  height: 10em;
  width: 100vw;
}


.background {
  background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px;
  background-color: #12364a;
  background-size: 12px 12px;
  width: 100vw;
  height: 100vh;
  min-height: 300px;
  position: fixed;
  overflow: hidden;
  background-attachment: fixed;
  z-index: -1;
  }
  .background:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-image: radial-gradient(circle, transparent 0%, rgba(7, 9, 11, 0.56) 100%);
}

<div class="first">
    Lorem ipsum first page
</div>

<div class="second">
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
</div>

<footer>
    this is the footer
</footer>


<div class="background"></div>

最佳答案

将所有内容包装在您定位的 div 中:absolute 而不是让所有元素都是绝对的。

body {
  padding: 0;
  margin: 0;}
.first {
  color: white;
  height: 100vh;
  width: 100vw;
}

.second {
  margin-top: 110vh;
  color: white;
  width: 100vw;
}

footer {
  background-color: coral;
  z-index: 200;
  height: 10em;
  width: 100vw;
}


.background {
  background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px;
  background-color: #12364a;
  background-size: 12px 12px;
  width: 100vw;
  height: 100vh;
  min-height: 300px;
  position: fixed;
  overflow: hidden;
  background-attachment: fixed;
  z-index: -1;
  }
  .background:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-image: radial-gradient(circle, transparent 0%, rgba(7, 9, 11, 0.56) 100%);
}

.test{
	position: absolute;
}

<html>
<head>
</head>
<body>
	<div class="test">
	
		<div class="first">
		Lorem ipsum first page
		</div>

		<div class="second">
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
		</div>

		<footer>
			this is the footer
		</footer>
	</div>

	<div class="background"></div>
</body>
</html>