将页脚置于最底部，仅包含绝对内容

【问题标题】：Positions Footer at very bottom with only absolute content将页脚置于最底部，仅包含绝对内容
【发布时间】：2019-06-14 15:29:15
【问题描述】：

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

现在我想创建一个新的部分或页脚。但问题是它卡在页面顶部。就像没有其他内容一样。我认为这是因为 position: absolute 在所有其他元素上。 位置：绝对和底部：0 也不适用于页脚。然后它只是粘在视口的底部而不是整个页面的底部。

如何设置下一个内容的样式以使其低于其他内容？

我使用 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>

【问题讨论】：

  • 请将相关代码 sn-ps 发布到您的问题中。
  • 发布您的代码。

标签： html css footer positioning absolute


【解决方案1】：

我不知道你为什么要添加这么多 css 并使它变得困难！我从问题中了解到的可以用简单的 css 来完成。这是一个例子：

body {
  padding: 0;
  margin: 0;
  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;
  background-attachment: fixed;
  color: #fff;
}

footer {
  background-color: coral;
  height: 10em;
  width: 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>

如果您希望 .first 和 .second 之间有 100vh 间距，则：

body {
  padding: 0;
  margin: 0;
  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;
  background-attachment: fixed;
  color: #fff;
}

.first {
  padding-bottom: 100vh;
}

footer {
  background-color: coral;
  height: 10em;
  width: 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>

【讨论】：

  • 这很漂亮！
【解决方案2】：

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

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>

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2012-09-11
    • 2012-02-26
    • 1970-01-01
    • 1970-01-01
    • 2016-04-18
    • 1970-01-01
    • 2020-06-26
    • 2013-04-09
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode