背景未扩展到视口宽度 [英] Background not expanding to the viewport width
本文介绍了背景未扩展到视口宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将背景的宽度扩展到视口，并且其高度等于我要放入其中的内容的高度.如您所见，我已将CSS中.bgcont的宽度设置为100vw，并将高度设置为:100％，但仍未扩展到该宽度.还请帮助增加高度.我希望背景的高度在我添加的2个按钮下方结束.
I want to extend the width of the background to that of the viewport and its height equal to the content I'm putting inside it. As you can see, I've set the width of .bgcont in CSS to 100vw and height: 100% but it's still not extending to it. Please also help with the height. I want the background's height to end just below the 2 buttons I've added.
*{
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>
推荐答案
宽度问题
对于宽度问题，只需添加以下内容:
Width issue
For the width issue, it's just a matter of adding the following:
header .bgcont {
…
max-width: none;
}
但是请记住，对于不同的断点，该行覆盖了_grid.scss内部的规则:
Keep in mind, though, that this line is overriding rules inside of _grid.scss for various breakpoints:
要使高度在刚添加的两个按钮下方结束，请删除.bg-cont中的height规则.为了给事物提供一些喘息的空间，我还添加了一些底部填充.
For the height to end just below the two buttons you've added, remove the height rule in .bg-cont. To give things a bit of breathing room, I added a touch of bottom padding as well.
演示
*{
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>
这篇关于背景未扩展到视口宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
