如何使背景视频始终延伸到屏幕调整大小的特定部分之上？

Question

在这个问题上我一直在盯着自己看。

我想要的是背景视频始终在 'Options' 部分上方结束，无论屏幕尺寸如何。

这是我的代码：https://codepen.io/bassiee/pen/abLYVQw?editors=1100

我对编码很陌生，所以只使用 HTML 和 CSS。

在桌面上，它可以工作。但是在屏幕调整大小时，'Options' 部分将开始覆盖视频。我可以为其添加媒体查询以使其适用于特定 px 屏幕尺寸，但一直无法找到适用于所有屏幕尺寸的解决方案。

这是它在桌面上的样子，箭头指向标准 space 我总是希望在视频结尾和选项开头之间 div。

在屏幕尺寸稍小的情况下，会发生这种情况。手机也一样。

HTML:

<header id="header" style="font-family: 'archivo', arial;">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;800&display=swap" rel="stylesheet">

<title id="title">Become a partner</title>

<nav id="nav-bar">

<a href=""><img src="https://assets.codepen.io/7471668/truck.png" id="header-img" alt="company-logo" /></a>

<ul class="nav__menu">
  <li class="nav__item">
    <a class="nav-link" href="#options">Options</a></li>
  <li class="nav__item">
    <a class="nav-link" href="#how">How it works</a></li>
  <li class="nav__item">
            <a class="nav-link" href="#sign-up">Sign-up</a></li>
</ul>
  
</nav>

</header>

<main style="font-family: 'archivo', arial;">

<video id="background-video" autoplay loop muted poster="https://assets.codepen.io/7471668/truck-video.png">
<source src="https://assets.codepen.io/7471668/Countryside+in+the+evening.mp4" type="video/mp4">
</video>

<h1>Title for the page</h1>
<p id="header-p">Slogan for the page</p>

<div class="benefits-div">
<figure>
<img class="benefit-img" src="https://assets.codepen.io/7471668/Real+money+icon.png" />
<figcaption>benefit 1</figcaption>
</figure>
<figure>
 <img class="benefit-img" src="https://assets.codepen.io/7471668/europe.png" />
<figcaption>benefit 2</figcaption>
</figure>
<figure>
 <img class="benefit-img" src="https://assets.codepen.io/7471668/hands.png" />
<figcaption>benefit 3</figcaption>
</figure>
</div>

<section id="options">
<div class="options-div">
<div id="regular-div">
  <h2>Option 1</h2>
  <p>One sentence summary</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec scelerisque nisi, ut porta erat. Aenean id eros nunc. Integer elementum aliquet condimentum. <br><br>Proin faucibus, metus ac tincidunt viverra, nunc ipsum faucibus est, at tristique ex sem ut dui. Suspendisse ullamcorper, ante et vulputate facilisis, augue metus pharetra magna, non mattis lectus ante ut urna.</p>
  <form>
    <a href=""><input id="submit" type="submit" value="Sign up" /></a>
  </form>
</div>
<div id="trusted-div">
  <h2>Option 2</h2>
  <p>One sentence summary</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec scelerisque nisi, ut porta erat. Aenean id eros nunc. Integer elementum aliquet condimentum. <br><br>Proin faucibus, metus ac tincidunt viverra, nunc ipsum faucibus est, at tristique ex sem ut dui. Suspendisse ullamcorper, ante et vulputate facilisis, augue metus pharetra magna, non mattis lectus ante ut urna.</p>
  <form>
    <a href=""><input id="submit" type="submit" value="Sign up" /></a>
  </form>
</div>
</div>
</section>

CSS:

/* background video */
#background-video {
  width: 100vw;
  height: 620px;
  object-fit: cover;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
 }
@media (max-width: 481px) {
#background-video { height: 900px;
 }
}

/* header */
#nav-bar {
 display: flex;
 position: fixed;
 left: 0;
 width: 100%;
 background-color: rgba(0, 0, 0, 0);
}
.nav__menu {
display: flex;
font-size: 0.95rem;
}
.nav__item {
margin-right: 3rem;
font-family: archivo;
list-style-type: none;
}
.nav-link {
color: white;
text-decoration: none;
}
.nav-link:hover,
.nav-link:focus-visible {
box-shadow: 0 4px 0 -1px #FFF;
}
#header-img {
width: 80px;
height: 40px;
margin-top: 6px;
margin-left: 25px;
margin-right: 0;
}
@media (max-width: 481px) {
#nav-bar { 
 flex-direction: column;
 justify-content: center;
 align-items: center;
 }
}
@media (max-width: 481px) {
#header-img { 
margin-left: 0;
}
}

/* main */
h1 {
padding-top: 120px;
text-align: center;
font-size: 40px;
color: white;
}
#header-p {
text-align: center;
color: white;
opacity: 90%;
}
.benefits-div {
display: flex;
justify-content: center;
position: static;
width: 100%;
margin-top: 8%;
}
@media (max-width: 481px) {
.benefits-div {
    flex-direction: column;    
 }
}
figure {
text-align: center;
}
.benefit-img {
width: 100px; 
margin-bottom: 5px;
}
figcaption {
font-size: 12px;
color: white;
}
.options-div {
display: flex;
justify-content: space-evenly;
width: 100%;
position: static;
margin-top: 12%;
left: 0px;
}
@media (max-width: 800px) {
.options-div {
    flex-direction: column;
    justify-content: center;
 }
}
#regular-div, #trusted-div {
border: 1px solid;
border-radius: 5px;
width: 40%;
text-align: center;
}
@media (max-width: 800px) {
#regular-div, #trusted-div {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
 }
}
#submit {
padding: 10px;
margin-bottom: 10px;
width: 60%;
color: white;
font-weight: 800;
background-color: green;
border: 0;
border-radius: 5px;
}

更新：使用给出的答案更新代码后的问题图片：

Answer 1

因此，您的 HTML 中存在一些 语义错误 ，例如 body 元素中的 title，以及 anchor 标签在 form 标签中，input 标签在 anchor 标签中。您还使用了两次 submit ID。

id’s are unique

并且由于 ids 比 classes 具有更高的特异性，我强烈建议您不要过多使用 ID。

至于您的 CSS，事半功倍。遵循 DRY 规则。

Don't Repeat Yourself

您用 @media-query 包装每个元素，而不是像这样将它们分组：

@media (max-width: 481px) {
    #nav-bar {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #header-img {
        margin-left: 0;
    }
}

现在，为了更好地理解所有内容，我删除了您 html 和 css 中与导航栏相关的所有内容，因为问题与这些元素无关。

我还纠正了您的一些 HTML 语义错误。

我建议您为您的 html 代码使用 HTML 验证器，例如 The W3C Markup Validator Service，因为它可以帮助您更正代码，以防您遗漏某些内容。

我想出了什么：

后台溢出问题

我在 main 元素中的 h1、p 和 div.benefits

section

我在这个部分应用了 display: relative，所以视频将一直在这个部分
我给了它 height 和 width 并添加了 overflow: hidden
对于视频，我给了它一个 height 和一个 100% 的 width 以便它采用其 parent（小节）
我也加了object-position: center

div.benefits

我认为媒体查询并不是必需的，因为 flex 布局非常灵活。我建议您阅读这篇文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
这个盒子的children，我加了一个flex-grow: 1和一个min-width : 250px，周围加了一个margin

/*
* Always start with a reset of the basic CSS when starting to design :
* You can check here :
* https://meyerweb.com/eric/tools/css/reset
*/
body{
    margin: 0;
    padding: 0;
}
/*
* Wrapped your element that appears first in a section
* (like you did with the options)
*/
.main__section{
    position : relative;
    width: 100vw;
    height: 75vh;
    overflow: hidden;
}
#background-video {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}
.benefits-div {
    display: flex;
    flex-wrap: wrap; /*allow your element to display vertically when not enough space horizontally*/
    justify-content: center;
    width: 100%;
    margin-top: 12px;
}
.options-div {
    display: flex;
    flex-wrap: wrap; /*allow your element to display vertically when not enough space horizontally*/
    justify-content: space-evenly;
    width: 100vw;
    left: 0px;
}
#regular-div, #trusted-div {
    border: 1px solid;
    border-radius: 5px;
    width: 40%;
    text-align: center;
    margin: 24px;
    flex-grow: 1;
    min-width: 250px;
}
/*
* Replaced the id by a class
*/
.submit {
    padding: 10px;
    margin: 0 auto 10px;
    display: block; /* anchors are inline elements so we change it */
    width: 60%;
    color: white;
    font-weight: 800;
    background-color: green;
    border: 0;
    border-radius: 5px;
}
/* Figure and Figcaption CSS : I Haven't touched*/
figure {
    text-align: center;
}
.benefit-img {
    width: 100px;
    margin-bottom: 5px;
}
figcaption {
    font-size: 12px;
    color: white;
}

<main style="font-family: 'archivo', arial;">
<section class="main__section">
  <video id="background-video" autoplay loop muted poster="https://assets.codepen.io/7471668/truck-video.png">
  <source src="https://assets.codepen.io/7471668/Countryside+in+the+evening.mp4" type="video/mp4">
  </video>
  <div class="benefits-div">
  <figure>
    <img class="benefit-img" src="https://assets.codepen.io/7471668/Real+money+icon.png" />
    <figcaption>benefit 1</figcaption>
  </figure>
  <figure>
    <img class="benefit-img" src="https://assets.codepen.io/7471668/europe.png" />
    <figcaption>benefit 2</figcaption>
  </figure>
  <figure>
    <img class="benefit-img" src="https://assets.codepen.io/7471668/hands.png" />
    <figcaption>benefit 3</figcaption>
  </figure>
  </div>
</section>

    <section id="options">
  <div class="options-div">
    <div id="regular-div">
      <h2>Option 1</h2>
      <p>One sentence summary</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec scelerisque nisi, ut porta erat. Aenean id eros nunc. Integer elementum aliquet condimentum. <br><br>Proin faucibus, metus ac tincidunt viverra, nunc ipsum faucibus est, at tristique ex sem ut dui. Suspendisse ullamcorper, ante et vulputate facilisis, augue metus pharetra magna, non mattis lectus ante ut urna.</p>

        <a href="" class="submit">Sign Up</a>

    </div>
    <div id="trusted-div">
      <h2>Option 2</h2>
      <p>One sentence summary</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec scelerisque nisi, ut porta erat. Aenean id eros nunc. Integer elementum aliquet condimentum. <br><br>Proin faucibus, metus ac tincidunt viverra, nunc ipsum faucibus est, at tristique ex sem ut dui. Suspendisse ullamcorper, ante et vulputate facilisis, augue metus pharetra magna, non mattis lectus ante ut urna.</p>

        <a href="" class="submit">Sign Up</a>

    </div>
  </div>
    </section>
</main>

如何使背景视频始终延伸到屏幕调整大小的特定部分之上？

How do I make a background video to always extend to just above a specific section on screen resize?

html

css

html5-video

sections