background color doesn't stretch full height of div
Question
I have a section that is wrapping 2 div’s , one a video and the other a block of text. In the text block, I want the background color to span the height of the div, which appears to be a function of the height of the video. I would rather not use absolute pixel values to declare the height of the div. A height of 500px is very close but it's impossible to get the top and bottom margins of both the video and text divs perfectly aligned.
Question: Is there any way to make the background color in the text div span the entire div without declaring a height?
Since the black background of the wrapper is doing so, and neither the wrapper or the div's have a declared height, it seems like there should be a way. Thank you.
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>
2 answers
solution1
1 2017-11-08 04:23:51
Just move your background color from
.video_text to .wrapper_video_and_text
Do this
.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>
solution2
1 ACCPTED 2017-11-08 04:26:05
You want to remove the margin:auto from the class .video-text and add 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS background doesn't stretch to the full height
HTML, CSS - Background Color Doesn't Stretch the Full Length of Inner Div's Width
Stretch background image to occupy full height of div
Div doesn't stretch to window height
Div background-color doesn't fill the height
Background color not covering full height of div
Get background color to fill full height of div
div background color not covering full height and width of background image div
html - body doesn't stretch to full-height page
background doesn't stretch
Related Tags