背景颜色不会拉伸div

时间：2017-11-08 04:02:01

标签： html css flexbox background-color

我有一个部分包含 2 div ，一个是视频，另一个是文本块。在文本块中，我希望背景颜色到跨越div的高度，这似乎是视频高度的函数。我宁愿不使用绝对像素值来声明div的高度。 500px的高度非常接近但是不可能使视频和文本div的顶部和底部边缘完全对齐。

问题： 有没有办法让文本div中的背景颜色跨越整个div而不声明高度？

由于包装器的黑色背景正在这样做，并且包装器或div都没有声明的高度，所以似乎应该有办法。谢谢。

＆＃13;
＆＃13; 
html {
  background-color: black;
}

body {
  width: 100%;
  margin: 0 auto 0;
}

.container_white_space {
  height: 50px;
  background-color: white;
}

.container_white_space p {
  text-indent: -9999px;
  border: 0px;
  margin: 0px;
}

.wrapper_video_and_text {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-top: 0px;
}

.video {
  width: 50%;
}

.video_text {
  width: 50%;
  margin: auto;
  overflow: hidden;
  background: linear-gradient(to left, rgb(255, 255, 255), rgb(80, 70, 81));
}

.video_text p {
  font-family: "europa", sans-serif;
  font-size: 20px;
  color: black;
  line-height: 135%;
  margin-left: 30%;
  margin-right: 30%;
}
＆＃13; 
<!DOCTYPE HTML>
<html>
  <head>
    <script src="//content.jwplatform.com/libraries/YQ8opLwo.js"></script>
    <script src="https://use.typekit.net/qkv6kzb.js"></script>
    <script>
      try {
          Typekit.load({
              async: true
          });
      } catch (e) {}
    </script>
    <script src="https://use.typekit.net/qkv6kzb.js"></script>
    <script>
      try {
          Typekit.load({
              async: true
          });
      } catch (e) {}
    </script>
    <meta charset="UTF-8">
    <title>Barton's website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <header>
    </header>
    <div class="container_white_space">
      <p>text</p>
    </div>
    <section class="wrapper_video_and_text">
      <div class="video">
        <video width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted" preload>
          <source src="https://bartonlewisfilm.com/08-LHBExcerpt.mp4" type="video/mp4">
        </video>
      </div>
      <div class="video_text">
        <p>text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here.</p>
      </div>
    </section>
    <div class="container_white_space">
      <p>text</p>
    </div>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

只需移动背景颜色

.video_text至.wrapper_video_and_text

执行此操作 

.wrapper_video_and_text{
    background: linear-gradient(to left, rgb(255, 255, 255), rgb(80, 70, 81));
}


html {
  background-color: black;
}

body {
  width: 100%;
  margin: 0 auto 0;
}

.container_white_space {
  height: 50px;
  background-color: white;
}

.container_white_space p {
  text-indent: -9999px;
  border: 0px;
  margin: 0px;
}

.wrapper_video_and_text {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-top: 0px;
  background: linear-gradient(to left, rgb(255, 255, 255), rgb(80, 70, 81));
}

.video {
  width: 50%;
}

.video_text {
  width: 50%;
  margin: auto;
  overflow: hidden;
}

.video_text p {
  font-family: "europa", sans-serif;
  font-size: 20px;
  color: black;
  line-height: 135%;
  margin-left: 30%;
  margin-right: 30%;
}
<!DOCTYPE HTML>
<html>
  <head>
    <script src="//content.jwplatform.com/libraries/YQ8opLwo.js"></script>
    <script src="https://use.typekit.net/qkv6kzb.js"></script>
    <script>
      try {
          Typekit.load({
              async: true
          });
      } catch (e) {}
    </script>
    <script src="https://use.typekit.net/qkv6kzb.js"></script>
    <script>
      try {
          Typekit.load({
              async: true
          });
      } catch (e) {}
    </script>
    <meta charset="UTF-8">
    <title>Barton's website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <header>
    </header>
    <div class="container_white_space">
      <p>text</p>
    </div>
    <section class="wrapper_video_and_text">
      <div class="video">
        <video width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted" preload>
          <source src="https://bartonlewisfilm.com/08-LHBExcerpt.mp4" type="video/mp4">
        </video>
      </div>
      <div class="video_text">
        <p>text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here.</p>
      </div>
    </section>
    <div class="container_white_space">
      <p>text</p>
    </div>
  </body>
</html>

答案 1 :(得分：1)

您想从类.video-text中删除边距：auto并添加min-height：100％

<!DOCTYPE HTML>
<html>
<head>

    <meta charset="UTF-8">
    <title>Barton's website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
    <![endif]-->
    <style>
        html {
            background-color: black;
        }
        body {
            width: 100%;
            margin: 0 auto 0;
        }
        .container_white_space {
            height: 50px;
            background-color: white;
        }
        .container_white_space p {
            text-indent: -9999px;
            border: 0px;
            margin: 0px;
        }
        .wrapper_video_and_text {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            width: 100%;
            padding-top: 0px;
        }
        .video {
            width: 50%;
        }
        .video_text {
            width: 50%;
            overflow: hidden;
            background: linear-gradient(to left, rgb(255, 255, 255), rgb(80, 70, 81));
            min-height:100%;

        }
        .video_text p {
            font-family: "europa",sans-serif;
            font-size: 20px;
            color: black;
            line-height: 135%;
            margin-left: 30%;
            margin-right: 30%;
        }
    </style>
</head>
<body>
<header>
</header>
<div class="container_white_space">
    <p>text</p>
</div>
<section class="wrapper_video_and_text">
    <div class="video">
        <video width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted" preload>
            <source src="https://bartonlewisfilm.com/08-LHBExcerpt.mp4" type="video/mp4">
        </video>
    </div>
    <div class="video_text">
        <p>text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here.</p>
    </div>
</section>
<div class="container_white_space">
    <p>text</p>
</div>
</body>
</html>
相关问题
最新问题