我打算为一个页面制作全屏幕部分,并且在它决定不工作之前一切正常。我不确定它有什么问题,但如果有人能告诉我,我会很感激。
Div的:
<div class="container1">
<a href="#cont1">
<img src="down.png"></img>
</a>
<h1>Day</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida ultricies suscipit. Integer in luctus enim, id varius velit. Suspendisse potenti. Quisque feugiat lectus eget est suscipit, eget aliquam mauris pharetra. Fusce aliquet dui nec mi
pulvinar, eu volutpat diam volutpat. Integer eget neque facilisis, ornare felis ac, vulputate eros. Etiam et accumsan erat. Aenean porttitor egestas justo et vestibulum. Donec gravida dignissim neque id vehicula. Ut non nunc ut lectus placerat tempor.
Sed porttitor ullamcorper eros, sed eleifend felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque mauris erat, consequat sed nulla et, volutpat accumsan leo. Mauris cursus aliquet magna, eu facilisis
velit scelerisque vitae. Aliquam tristique id nisl in pulvinar. Vestibulum non adipiscing dui, a commodo lorem.
</p>
</div>
<div class="container2">
<a href="#cont">
<img src="up.png"></img>
</a>
<h2>Night</h2>
<p name=cont1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida ultricies suscipit. Integer in luctus enim, id varius velit. Suspendisse potenti. Quisque feugiat lectus eget est suscipit, eget aliquam mauris pharetra. Fusce aliquet dui nec mi
pulvinar, eu volutpat diam volutpat. Integer eget neque facilisis, ornare felis ac, vulputate eros. Etiam et accumsan erat. Aenean porttitor egestas justo et vestibulum. Donec gravida dignissim neque id vehicula. Ut non nunc ut lectus placerat tempor.
Sed porttitor ullamcorper eros, sed eleifend felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque mauris erat, consequat sed nulla et, volutpat accumsan leo. Mauris cursus aliquet magna, eu facilisis
velit scelerisque vitae. Aliquam tristique id nisl in pulvinar. Vestibulum non adipiscing dui, a commodo lorem.
</p>
</div>
的CSS:
body {
background-image: url('http://media-cache-ec0.pinimg.com/736x/b8/02/64/b80264c12c88eac19d5e4c8597d051e1.jpg');
background-attachment: fixed;
background-size: cover;
font-family: 'Roboto', sans-serif;
text-align: center;
color: white;
height: 100%;
text-shadow: black 0 0 4px;
}
p {
height: 100%;
}
.container1 {
position: absolute;
height: 100%;
}
.container2 {
width: 100%;
background-image: url(http://ak7.picdn.net/shutterstock/videos/5200997/preview/stock-footage-blurred-background-of-moving-lights-from-a-road-of-traffic-at-night-time.jpg);
background-attachment: fixed;
background-size: cover;
margin: 0;
position: absolute;
left: 0;
height: 100%;
}
img {
max-width: 15vw;
height: auto;
}
.container1 img {
position: absolute;
top: 0;
left: 0;
}
.container2 img{
position: absolute;
left: 0;
}
h1 {
font-size: 15vw;
}
h2{
font-size: 15vw;
}
请忽略任何兼容性问题或错误使用某些标签,我正在努力。
结果破碎:
我希望那天的部分是全高的
答案 0 :(得分:4)
不仅body
,而且html
标记也应设置为height: 100%
。百分比高度属性是相对于父级计算的,事实证明,body
不是最高的html
。