现在,我创建的页面或多或少只包含固定内容和绝对内容。创建第一个视口非常容易,因为它的最大高度为100vh。因此,我用margin-top设置了第二部分的样式:100vh。现在一切正常。但是第二部分不再是100vh的高度。高度或多或少是未知的。
现在,我想创建一个新的部分或页脚。但是问题在于它停留在页面顶部。就像没有其他内容一样。我认为这是因为位置:在所有其他元素上都是绝对的。 另外位置:绝对和底部:0不适用于页脚。然后它只是停留在视口的底部,而不是整个页面的底部。
如何设置下一个样式的样式,使其低于其他内容?
我使用position:absolute的原因是使用CSS创建的固定背景。 也许有一种更聪明的方法来使内容与背景重叠而没有绝对位置?
我认为这是解决问题所需的相关代码:
<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>
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%);
}
答案 0 :(得分:1)
将所有内容包装在您所定位的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>
答案 1 :(得分: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>