【发布时间】：2021-04-26 20:01:09
【问题描述】：
当我将浏览器窗口的高度设置为 200 像素时，我必须向下滚动才能看到页面左栏中的所有文本。我希望我的背景图像不仅覆盖视口高度，而且覆盖必须滚动的整个页面，这样我的布局就不会中断，并且文本在背景图像顶部可见。
我正在做一个在线课程，有人解释说我可以通过设置min-height: 100vh 来解决这个问题。我已经在.intro、.bg-image 和.intro-content 上设置了这个。我的问题仍然存在。
提前致谢。
演示：
body {
margin: 0;
font-size: 1.125rem;
font-family: 'Source Sans Pro', sans-serif;
color: #404040;
text-align: center;
display: flex;
}
/* ===============
Typography
=================*/
h1,
h2,
p {
margin-top: 0;
}
h1 {
font-size: 3.5rem;
font-weight: 300;
color: #fff;
margin: 4em 0 0;
}
h1 + p {
color: #f18119;
font-weight: 900;
font-size: 1.75rem;
text-transform: uppercase;
margin: 0;
}
.top-text {
color: #f18119;
font-weight: 900;
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 1.5px;
border-top: 5px solid #f18119;
order: -1;
}
h2 {
font-size: 1.75rem;
font-weight: 900;
text-transform: uppercase;
margin: 0;
}
h2 + p {
color: #f18119;
font-weight: 900;
text-transform: uppercase;
}
.disclaimer-text {
font-size: 0.625rem;
letter-spacing: 1px;
}
strong {
font-weight: 900;
}
/* ===============
Intro
=================*/
.intro {
width: 50%;
min-height: 100vh;
position: relative;
}
.bg-image {
background-image: url(bbq_spareribs.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(51, 44, 44, .7);
background-blend-mode: overlay;
filter: blur(3px);
width: 100%;
max-width: 100%;
min-height: 100vh;
}
.intro-content {
width: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
min-height: 100vh;
box-sizing: border-box;
padding: 0 .5em 2em;
display: flex;
flex-direction: column;
}
/* ===============
Main content
=================*/
.main-content {
padding: 2em 1em;
box-sizing: border-box;
width: 50%;
min-height: 100vh;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Tristan Graaff">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>BBQ</title>
</head>
<body>
<div class="intro">
<div class="bg-image"></div>
<div class="intro-content">
<h1>Learn how to make <br> <strong>the best BBQ ribs</strong> <br> in town</h1>
<p>Join us for this live webinar</p>
<p class="top-text">Mouthwateringly delicious</p>
</div>
</div>
<div class="main-content">
<h2>Become a BBQ master! </h2>
<p>Register Today</p>
<p>BBQ isn't just standing in front of your grill with it on full blast and hoping for the best. It's an art!
One way to speed up the process is to learn from the best. You can do just that by signing up for this free
webinar!</p>
<form>
<input type="text" value="first name">
<input type="text" value="email address">
<input type="submit" value="register">
</form>
<p class="disclaimer-text">We'll never share your information without your permission</p>
</div>
</body>
</html>【问题讨论】：
-
你的问题解决了吗？
-
是的，它现在正在工作！而且我现在还看到，没有必要在 .intro-content 类上使用 position 和 transform 属性。非常感谢！
标签： css height background-image viewport