Html 背景色不'；t拉伸div的全高度_Html_Css_Flexbox_Background Color

Html 背景色不'；t拉伸div的全高度

html css

Html 背景色不'；t拉伸div的全高度,html,css,flexbox,background-color,Html,Css,Flexbox,Background Color,我有一个部分正在包装两个div，一个是视频，另一个是文本块。在文本块中，我希望背景色跨越div的高度，这似乎是视频高度的函数。我宁愿不使用绝对像素值来声明div的高度。500px的高度非常接近，但不可能使视频和文本div的上下边距完全对齐问题：有没有办法使文本div中的背景色跨越整个div而不声明高度由于包装器的黑色背景正在这样做，而且包装器或div都没有声明的高度，因此似乎应该有一种方法。多谢各位 html{ 背景色：黑色； } 身体{ 宽度：100%；保证金：0自动0； } .co

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

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

由于包装器的黑色背景正在这样做，而且包装器或div都没有声明的高度，因此似乎应该有一种方法。多谢各位

html{
背景色：黑色；
}
身体{
宽度：100%；
保证金：0自动0；
}
.container\u白色空间{
高度：50px；
背景色：白色；
}
.container\u white\u space p{
文本缩进：-9999px；
边界：0px；
边际：0px；
}
.wrapper\u视频\u和\u文本{
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
宽度：100%；
填充顶部：0px；
}
.视频{
宽度：50%；
}
.video_text{
宽度：50%；
保证金：自动；
溢出：隐藏；
背景：线性梯度（向左，rgb（255，255，255），rgb（80，70，81））；
}
.video_text p{
字体系列：“欧罗巴”，无衬线；
字体大小：20px；
颜色：黑色；
线高：135%；
左缘：30%；
保证金权利：30%；
}


试一试{
类型套件。加载({
异步：true
});
}捕获（e）{}
试一试{
类型套件。加载({
异步：true
});
}捕获（e）{}
巴顿的网站
正文
文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里
正文

只需将背景颜色从

.video\u text

到

.wrapper\u video\u和\u text

这样做

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

html{
背景色：黑色；
}
身体{
宽度：100%；
保证金：0自动0；
}
.container\u白色空间{
高度：50px；
背景色：白色；
}
.container\u white\u space p{
文本缩进：-9999px；
边界：0px；
边际：0px；
}
.wrapper\u视频\u和\u文本{
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
宽度：100%；
填充顶部：0px；
背景：线性梯度（向左，rgb（255，255，255），rgb（80，70，81））；
}
.视频{
宽度：50%；
}
.video_text{
宽度：50%；
保证金：自动；
溢出：隐藏；
}
.video_text p{
字体系列：“欧罗巴”，无衬线；
字体大小：20px；
颜色：黑色；
线高：135%；
左缘：30%；
保证金权利：30%；
}


试一试{
类型套件。加载({
异步：true
});
}捕获（e）{}
试一试{
类型套件。加载({
异步：true
});
}捕获（e）{}
巴顿的网站
正文
文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里
正文

只需将背景颜色从

.video\u text

到

.wrapper\u video\u和\u text

这样做

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

html{
背景色：黑色；
}
身体{
宽度：100%；
保证金：0自动0；
}
.container\u白色空间{
高度：50px；
背景色：白色；
}
.container\u white\u space p{
文本缩进：-9999px；
边界：0px；
边际：0px；
}
.wrapper\u视频\u和\u文本{
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
宽度：100%；
填充顶部：0px；
背景：线性梯度（向左，rgb（255，255，255），rgb（80，70，81））；
}
.视频{
宽度：50%；
}
.video_text{
宽度：50%；
保证金：自动；
溢出：隐藏；
}
.video_text p{
字体系列：“欧罗巴”，无衬线；
字体大小：20px；
颜色：黑色；
线高：135%；
左缘：30%；
保证金权利：30%；
}


试一试{
类型套件。加载({
异步：true
});
}捕获（e）{}
试一试{
类型套件。加载({
异步：true
});
}捕获（e）{}
巴顿的网站
正文
文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里文字在这里
正文

要从类中删除边距：自动。视频文本和添加最小高度：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{
背景色：黑色；
}
身体{
宽度：100%；
保证金：0自动0；
}
.container\u白色空间{
高度：50px；
背景色：白色；
}
.container\u white\u space p{
文本缩进：-9999px；
边界：0px；
边际：0px；
}
.wrapper\u视频\u和\u文本{
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
宽度：100%；
填充顶部：0px；
}
.视频{
宽度：50%；
}
.video_text{
宽度：50%；
溢出：隐藏；
背影