html - 背景颜色不会拉伸(stretch) div 的全高-6ren

html - 背景颜色不会拉伸(stretch) div 的全高

转载作者：太空宇宙更新时间：2023-11-04 01:30:36

25

4

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

问题:有什么方法可以让文本div中的背景色在不声明高度的情况下跨越整个div吗？

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

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%;
}

<!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>

最佳答案

您想从 .video-text 类中删除 margin: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>

关于html - 背景颜色不会拉伸(stretch) div 的全高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47171362/

25

4

0

文章推荐： css - SASS 中的目标子类和元素？

文章推荐： c - 调用对象 ‘x2’ 的宏错误不是函数

文章推荐： c++ - 使用 libclang/libtooling

文章推荐： CSS，如何在 Angular 2 的叠加层内垂直居中文本

java - 颜色[] col= {颜色.红色,颜色.蓝色};在java中是什么意思？
我正在阅读 java swing，但在理解它时遇到问题。 Color 是一个类吗？ Color[] col= {Color.RED,Color.BLUE}; 这在java中是什么意思？最佳答案 Is
python - map (lambda x : int(x, 16)/256.0，[颜色[1 :3], 颜色[3 :5], 颜色[5:7]])
我正在研究用 python 编写的 pacman 程序。其中一个模块是处理吃 bean 游戏的图形表示。这当然是一些主机颜色。列表如下: GHOST_COLORS = [] ## establishe
css - 颜色(颜色)在我的诺基亚 Windows Phone 上看起来不对
本网站:http://pamplonaenglishteacher.com 源代码在这里:https://github.com/Yorkshireman/pamplona_english_teache
android - 颜色/可绘制更改应用于具有相同背景(颜色)的所有 View [Marshmallow]
我最近将我的手机更新为 Android Marshmallow 并在其上运行了我现有的应用程序，但注意到颜色行为有所不同:将更改应用到 View (可绘制)的背景时，共享相同背景的所有 View (引
android - Android 颜色 XML 资源文件中的 Web 颜色
所有 X11/w3c 颜色代码在 Android XML 资源文件格式中是什么样的？ I know this looks a tad ridiculous as a question, but giv
ffmpeg 颜色、大小和幅度
试图让 ffmpeg 创建音频波形，同时能够控制图像大小、颜色和幅度。我已经尝试过这个(以及许多变体)，但它只是返回无与伦比的 "。 ffmpeg -i input -filter_complex "
R 颜色 - 许多独特的颜色仍然很漂亮
我很好奇你是否有一些关于 R 中颜色酿造的技巧，对于许多独特的颜色，以某种方式使图表仍然好看。我需要大量独特的颜色(至少 24 种，可能需要更多，~50 种)用于堆叠区域图(所以不是热图，渐变色不起
WPF 颜色 - 可访问性注意事项？
我看到的许多 WPF 示例和示例似乎都有硬编码的颜色。这些指南 - http://msdn.microsoft.com/en-us/library/aa350483.aspx建议不要硬编码颜色。在构建
Vim NERDTree 颜色
我想更改文件夹的默认蓝色如何设置？最佳答案 :hi Directory guifg=#FF0000 ctermfg=red 关于Vim NERDTree 颜色，我们在Stack Overflow上
将字符串哈希为 RGB 颜色
是否有关于如何将任意字符串哈希为 RGB 颜色值的最佳实践？或者更一般地说:3 个字节。你问:我什么时候需要这个？这对我来说并不重要，但想象一下任何 GitHub 上的那些管图 network pa
dart - 可选参数的默认值必须为常数-颜色
我正在尝试将默认颜色设置为自定义窗口小部件。这是有问题的代码。 class ReusableCard extends StatelessWidget { ReusableCard({this.
Java - Jtable 颜色
import javax.swing.*; import javax.swing.table.DefaultTableCellRenderer; import javax.swing.table.Ta
css - 较少的混合名称被评估为颜色/颜色
我有一个 less 文件来定义一堆颜色/颜色。每个类名都包含相关颜色的名称，例如 .colourOrange{..} 或 .colourBorderOrange{..} 或 navLeftButtOr
java - relativeLayout背景图片+颜色
我有一个RelativeLayout，我需要一个黑色背景和一个位于其中间的小图像。我使用了这段代码: 其中@drawable/bottom_box_back是: 这样我就可以将图像居中了。但背
java仅生成随机 "light"颜色
我需要设置浅色的 JPanel 背景，只是为了不覆盖文本(粗体黑色)。此刻我有这个: import java.util.Random; .... private Random random =
c - 如何以编程方式更改选定的文本字体/颜色？
我正在尝试制作一个自定义文本编辑器，可以更改特定键入单词的字体和颜色。如何更改使用光标突出显示的文本的字体和/或颜色？我还没有尝试过突出显示部分。我尝试获取整个 hEdit(HWND) 区域并更改字
Android ActionBar 颜色
我想改变我整个应用程序的颜色。在我的 AndroidManfiest.xml 中，我有正确的代码: 在 values 文件夹中，我有 app_theme.xml: @style/MyAc
来自资源的android数据绑定(bind)颜色
是否可以使用 android 数据绑定(bind)从 xml 中引用颜色？这很好用: android:textColor="@{inputValue == null ? 0xFFFBC02D : 0
Android "hollow"颜色
有没有办法在 Android 应用程序中设置“空心”颜色？我的意思是我想要一个带有某种背景的框，而文本实际上会导致背景透明。换句话说，如果整个 View 在蓝色背景上，文本将是蓝色的，如果它是红色的
ios - CGContextStrokePath 颜色
我用CGContextStrokePath画在白色背景图片中的一条直线上，描边颜色为红色，alpha为1.0画线后，为什么点不是(255, 0, 0)，而是(255, 96, 96)为什么不是纯红色？

首页

博学

6Ren·AI

商城

html - 背景颜色不会拉伸(stretch) div 的全高