@import url('https://fonts.googleapis.com/css?family=Raleway')
@import url('https://fonts.googleapis.com/css?family=Oswald')
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width:100%;
margin: auto;
background: url(https://static.pexels.com/photos/26206/pexels-photo.jpg) no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
}<!Doctype html>
<html>
<head>
<title>Full Screen Landing Page
</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Breathe Easy
</h1>
<a href="#" class="btn">Get Started
</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, alique
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, alique
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, alique
</p>
</div>
</div>
</section>
</body>
</html>
当我在chrome中打开index.html时，主体只占据屏幕的前1/3。但是，它似乎在stackoverflow上正常运行。为什么会这样？我的目的是制作一个响应全屏登陆页面。感谢。
答案 0 :(得分：-1)
如果您希望背景占据100％的空间，请将背景图片应用于body元素，而不是#intro。 #intro仅与您的内容一样高，因此背景仅涵盖该高度。
答案 1 :(得分：-1)
向身体添加color_map高度和宽度：
100%另一种解决方案是将body {
height: 100%;
width: 100%;
}
添加到课程100vh
.intro