当浏览器 window 设置为低高度时，如何防止我的背景图片变得小于整个页面的高度？
How do I prevent my background image from becoming smaller than the height of the total page when the browser window is set to a low height?
当我将浏览器 window 的高度设置为 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 设置为 height: 100vh;。您应该只设置 .bg-image、min-height: 100%; 而不是 100vh;。这样图像将随着容器的最小高度增长。
将总是 min-height:100vh; 放在与您设置相同的容器中的问题无法像您那样添加边距，因为容器不再包含该块。
为了使图片与其兄弟图片正确匹配，您应该按如下方式制作 css。
否则 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(https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_1280.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;*/
min-height: 100%; /* ADDED */
position:absolute; /* ADDED */
z-index:-1; /* ADDED */
}
.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>
当我将浏览器 window 的高度设置为 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 设置为 height: 100vh;。您应该只设置 .bg-image、min-height: 100%; 而不是 100vh;。这样图像将随着容器的最小高度增长。
将总是 min-height:100vh; 放在与您设置相同的容器中的问题无法像您那样添加边距，因为容器不再包含该块。
为了使图片与其兄弟图片正确匹配，您应该按如下方式制作 css。
否则 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(https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_1280.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;*/
min-height: 100%; /* ADDED */
position:absolute; /* ADDED */
z-index:-1; /* ADDED */
}
.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>