[英]CSS viewport height:100vh doesn't work correctly with content in the div
我是新来的并注册,因为我无法在现有的步骤中找到答案。
我正在尝试创建一个单页网站,我希望“目标网页”具有完整的背景。 我在整个页面上都有背景,但是当我开始在div中放置文本时,它就破了。 我使用了以下css(sass):
.intro {
color: #fff;
height: 100vh;
background: url('http://www.flabber.nl/sites/default/files/archive/files/i-should-buy-a-boat.jpg') no-repeat center center;
background-size: cover;
&--buttons {
position: absolute;
bottom: 2em;
}
}
p.hello {
margin: 30px;
}
.page1 {
color: #fff;
height: 100vh;
background: beige;
}
.page2 {
color: #fff;
height: 100vh;
background: black;
}
使用以下HTML:
<html>
<head>
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>My title</title>
</head>
<body>
<div class="container">
<div class="row">
<div id="intro" class="intro">
<div class="text-center">
<p class="hello">
Intro text is coming soon!
</p>
<div class="col small-col-12 intro--buttons">
<p>Buttons coming here.
</p>
</div>
</div>
</div>
<div id="page1" class="col col-12 page1">
<p>Tekst test</p>
</div>
<div id="page2" class="col col-12 page2">
<p>Tekst test.</p>
</div>
</div>
</div>
</body>
</html>
你可以在这里看到结果: http : //codepen.io/Luchadora/full/waYzMZ或者看我的笔: http : //codepen.io/Luchadora/pen/waYzMZ
正如你所看到的,当定位介绍文本时( p.hello {margin: 30px;}
,背景大小已经改变并且不再是全屏幕。(顺便说一句:我使用了一个示例背景)。其他页面现在也有空格。 。
我怎样才能解决这个问题? 我读过关于视口的文章,但我认为我唯一需要的是height: 100vh;
, 对? 提前致谢!
你还没有禁用身体的边缘。 将其添加到您的CSS中
body{
margin:0px;
}
编辑:Pete发布的答案似乎是完整的解决方案,抱歉太慢了!
这已在上面的一个侧面谈话中说过,但它对我有用,我希望人们能够轻松找到它。
-- overflow-x:hidden; on both html, body in the css.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.