我正在尝试在着陆页上实现全屏渐变。我正在使用 bootstrap，如果我在 CSS 文件中使用 HTML 标签，那么它会覆盖内容末尾下方的屏幕，但如果我使用 body 标签，那么它会覆盖相反的部分，即所有内容。 body tag gradient cover screenshot
/* Title Section */
#title {
padding-top: 22%;
}
h1 {
text-align: center;
font-size: 60px !important;
}
.title-buttons {
padding-top: 2%;
}
.title-btn1 {
margin-left: 35%;
}
.title-btn2 {
float: right;
margin-right: 35%;
}
body {
background-color: #FF3CAC;
background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
background-repeat: no-repeat;
background-repeat: no-repeat;
background-size: cover;
min-width: 100%;
min-height: 100%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Alec Klem</title>
<link rel="stylesheet" href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/css/style.css">
<!-- Bootstrap MDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<section id="title" class="">
<h1>Which website would you like to see?</h1>
<div class="title-buttons">
<a href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/professional.html"><button type="button" class="btn btn-light btn-lg title-btn1">Professional</button></a>
<a href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/educational.html"><button type="button" class="btn btn-light btn-lg title-btn2">Educational</button></a>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>我知道屏幕上的代码还没有响应，但如果您能够全屏查看它，它应该看起来像我的屏幕截图。我需要做什么才能让渐变占据全屏？
最佳答案
您应该使用 height:100vh 而不是 100%。
/* Title Section */
#title {
padding-top: 22%;
}
h1 {
text-align: center;
font-size: 60px !important;
}
.title-buttons {
padding-top: 2%;
}
.title-btn1 {
margin-left: 35%;
}
.title-btn2 {
float: right;
margin-right: 35%;
}
body {
background-color: #FF3CAC;
background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
background-repeat: no-repeat;
background-repeat: no-repeat;
background-size: cover;
min-width: 100%;
min-height: 100vh;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Alec Klem</title>
<link rel="stylesheet" href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/css/style.css">
<!-- Bootstrap MDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<section id="title" class="">
<h1>Which website would you like to see?</h1>
<div class="title-buttons">
<a href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/professional.html"><button type="button" class="btn btn-light btn-lg title-btn1">Professional</button></a>
<a href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/educational.html"><button type="button" class="btn btn-light btn-lg title-btn2">Educational</button></a>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>关于html - 如何让渐变在 bootstrap 和 css 中占据全屏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54453995/