我想将背景的宽度扩展到视口，并且其高度等于我在其中放置的内容。如您所见，我已将CSS中.bgcont的宽度设置为100vw，并将高度设置为：100％，但仍没有扩展。请也帮助高度。我希望背景的高度在我添加的2个按钮下方结束。
*{
margin: 0;
padding: 0;
}
html{
font-family: sans-serif;
}
body{
overflow-x: hidden;
}
header a{
text-decoration: none;
color: white;
}
nav h1{
color: white;
font-weight: lighter;
}
header .bgcont{
background-image: -moz-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
background-image: -webkit-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
background-image: -ms-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
/*z-index: 6;*/
border-bottom-left-radius: 300% 100%;
border-bottom-right-radius: 300% 100%;
position: absolute;
left: 0px;
top: 0px;
width: 100vw;
height: 100% ;
}
nav{
justify-content: space-between;
align-items: center;
}
nav ul{
list-style: none;
padding: 0;
display: flex;
align-items: center;
}
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 14px;
font-weight: bold;
}
@media (max-width: 991px) {
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 10px;
font-weight: bold;
}
}
@media (max-width: 768px) {
nav ul li a{
padding: 0.75rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 8px;
font-weight: bold;
}
nav h1{
font-size: large;
}
}
.signin{
border-radius: 15px;
border: 1px solid transparent;
color: white;
width: 100px;
height: 30px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
background-color: #1ecec2;
}
.content h1{
color: white;
max-width: 700px;
padding-top: 2em;
}
.content p{
color: white;
max-width: 650px;
}
.intro {
margin: 10px;
background-color: white;
color: #4970f1;
}
.play{
margin: 10px;
background-color: transparent;
}
.play, .intro{
border: 1px solid transparent;
border-radius: 20px;
padding: 5px 25px;
text-transform: uppercase;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<div class="container bgcont" >
<nav class="d-flex flex-row">
<h1 class="sling mb-0"><a href="index.html">Sling</a></h1>
<ul class="mb-0">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<button type="button" class="signin">Sign in</button>
</nav>
<div class="container d-flex flex-column text-center align-items-center content">
<h1>Discover Great Apps, Games Extension Plugin App Showcase</h1>
<p>Surprisingly, there is a very vocal faction of the design community that
wants to see filler text banished the original sources from who it comes.</p>
<div class="container d-flex flex-row justify-content-center" style="font-size: 12px;">
<button type="button" class="intro">How we do it</button>
<button type="button" class="play">Play into video</button>
</div>
</div>
</div>
</header>
</body>
</html>
答案 0 :(得分：3)
对于宽度问题，只需添加以下内容：
header .bgcont {
…
max-width: none;
}
但是请记住，此行在_grid.scss内部覆盖了各种断点的规则：
要使高度在刚添加的两个按钮下方结束，请删除height中的.bg-cont规则。为了给事物提供一些喘息的空间，我还添加了一些底部填充。
演示
*{
margin: 0;
padding: 0;
}
html{
font-family: sans-serif;
}
body{
overflow-x: hidden;
}
header a{
text-decoration: none;
color: white;
}
nav h1{
color: white;
font-weight: lighter;
}
header .bgcont{
max-width: none; /* Overrides existing rules defined in _grid.scss */
background-image: -moz-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
background-image: -webkit-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
background-image: -ms-linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
/*z-index: 6;*/
border-bottom-left-radius: 300% 100%;
border-bottom-right-radius: 300% 100%;
position: absolute;
left: 0px;
top: 0px;
width: 100vw;
padding-bottom: 1.5em; /* <-- Added to make things look nice */
/* height: 100% /* /* <-- Removed this */
}
nav{
justify-content: space-between;
align-items: center;
}
nav ul{
list-style: none;
padding: 0;
display: flex;
align-items: center;
}
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 14px;
font-weight: bold;
}
@media (max-width: 991px) {
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 10px;
font-weight: bold;
}
}
@media (max-width: 768px) {
nav ul li a{
padding: 0.75rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 8px;
font-weight: bold;
}
nav h1{
font-size: large;
}
}
.signin{
border-radius: 15px;
border: 1px solid transparent;
color: white;
width: 100px;
height: 30px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
background-color: #1ecec2;
}
.content h1{
color: white;
max-width: 700px;
padding-top: 2em;
}
.content p{
color: white;
max-width: 650px;
}
.intro {
margin: 10px;
background-color: white;
color: #4970f1;
}
.play{
margin: 10px;
background-color: transparent;
}
.play, .intro{
border: 1px solid transparent;
border-radius: 20px;
padding: 5px 25px;
text-transform: uppercase;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<div class="container bgcont" >
<nav class="d-flex flex-row">
<h1 class="sling mb-0"><a href="index.html">Sling</a></h1>
<ul class="mb-0">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<button type="button" class="signin">Sign in</button>
</nav>
<div class="container d-flex flex-column text-center align-items-center content">
<h1>Discover Great Apps, Games Extension Plugin App Showcase</h1>
<p>Surprisingly, there is a very vocal faction of the design community that
wants to see filler text banished the original sources from who it comes.</p>
<div class="container d-flex flex-row justify-content-center" style="font-size: 12px;">
<button type="button" class="intro">How we do it</button>
<button type="button" class="play">Play into video</button>
</div>
</div>
</div>
</header>
</body>
</html>
答案 1 :(得分：1)
它是与引导程序有关的问题。实际上，您正在使用container类，该类用于固定宽度的网格。
您应该改为使用container-fluid。
答案 2 :(得分：0)
只需使用min-height而不是height即可在小屏幕上包含该按钮，并删除容器类以使其具有完整宽度：
*{
margin: 0;
padding: 0;
}
html{
font-family: sans-serif;
}
/* don't need this
body{
overflow-x: hidden;
}
*/
header a{
text-decoration: none;
color: white;
}
nav h1{
color: white;
font-weight: lighter;
}
header .bgcont{
background-image:linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
/*z-index: 6;*/
border-bottom-left-radius: 300% 100%;
border-bottom-right-radius: 300% 100%;
position: absolute;
left: 0;
top: 0;
width: 100%; /*don't use vw to avoid including scrollbar in the width*/
min-height: 100% ;
padding-bottom:50px;
}
nav{
justify-content: space-between;
align-items: center;
}
nav ul{
list-style: none;
padding: 0;
display: flex;
align-items: center;
}
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 14px;
font-weight: bold;
}
@media (max-width: 991px) {
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 10px;
font-weight: bold;
}
}
@media (max-width: 768px) {
nav ul li a{
padding: 0.75rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 8px;
font-weight: bold;
}
nav h1{
font-size: large;
}
}
.signin{
border-radius: 15px;
border: 1px solid transparent;
color: white;
width: 100px;
height: 30px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
background-color: #1ecec2;
}
.content h1{
color: white;
max-width: 700px;
padding-top: 2em;
}
.content p{
color: white;
max-width: 650px;
}
.intro {
margin: 10px;
background-color: white;
color: #4970f1;
}
.play{
margin: 10px;
background-color: transparent;
}
.play, .intro{
border: 1px solid transparent;
border-radius: 20px;
padding: 5px 25px;
text-transform: uppercase;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<div class="bgcont px-2" > <!-- used px to add some padding like done by container -->
<nav class="d-flex flex-row">
<h1 class="sling mb-0"><a href="index.html">Sling</a></h1>
<ul class="mb-0">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<button type="button" class="signin">Sign in</button>
</nav>
<div class="container d-flex flex-column text-center align-items-center content">
<h1>Discover Great Apps, Games Extension Plugin App Showcase</h1>
<p>Surprisingly, there is a very vocal faction of the design community that
wants to see filler text banished the original sources from who it comes.</p>
<div class="container d-flex flex-row justify-content-center" style="font-size: 12px;">
<button type="button" class="intro">How we do it</button>
<button type="button" class="play">Play into video</button>
</div>
</div>
</div>
</header>
</body>
</html>
您还可以优化代码并依赖Bootstrap类。我还使用了渐变使底部的曲线更好：
html{
font-family: sans-serif;
}
header a{
color: white;
}
nav h1{
color: white;
font-weight: lighter;
}
header .bgcont{
background:
radial-gradient(55% 100px at top,transparent 93%,#fff 95%) bottom/100% 100px no-repeat,
linear-gradient( -47deg, rgb(56,97,234) 0%, rgb(102,137,255) 100%);
padding-bottom:30px;
}
nav ul{
list-style: none;
padding: 0;
}
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
font-size: 14px;
font-weight: bold;
}
@media (max-width: 991px) {
nav ul li a{
padding: 1rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 10px;
font-weight: bold;
}
}
@media (max-width: 768px) {
nav ul li a{
padding: 0.75rem 0;
margin: 0 0.5rem;
position: relative;
font-size: 8px;
font-weight: bold;
}
nav h1{
font-size: large;
}
}
.signin{
border-radius: 15px;
border: 1px solid transparent;
color: white;
width: 100px;
height: 30px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
background-color: #1ecec2;
}
.content h1{
color: white;
max-width: 700px;
padding-top: 2em;
}
.content p{
color: white;
max-width: 650px;
}
.intro {
margin: 10px;
background-color: white;
color: #4970f1;
}
.play{
margin: 10px;
background-color: transparent;
}
.play, .intro{
border: 1px solid transparent;
border-radius: 20px;
padding: 5px 25px;
text-transform: uppercase;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<div class="bgcont px-2 pt-1 min-vh-100" >
<nav class="d-flex justify-content-between align-items-center">
<h1 class="sling mb-0"><a href="index.html">Sling</a></h1>
<ul class="mb-0 d-flex align-items-center">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<button type="button" class="signin">Sign in</button>
</nav>
<div class="container d-flex flex-column text-center align-items-center content">
<h1>Discover Great Apps, Games Extension Plugin App Showcase</h1>
<p>Surprisingly, there is a very vocal faction of the design community that
wants to see filler text banished the original sources from who it comes.</p>
<div class="container d-flex flex-row justify-content-center" style="font-size: 12px;">
<button type="button" class="intro">How we do it</button>
<button type="button" class="play">Play into video</button>
</div>
</div>
</div>
</header>
</body>
</html>
答案 3 :(得分：0)
您已在容器中添加了bg，宽度：1140px。因此，它没有覆盖整个区域。对于高度，在全屏视图中，高度覆盖了100％的视口。
答案 4 :(得分：0)
类container，用于最大宽度的网络。
类container-fluid适用于使用全角宽度的Web。
使用container时，假设您将更改max-width来设置设计内容
