堆棧內存溢出
  簡體   English   中英

背景顏色無法拉伸div的整個高度

[英]background color doesn't stretch full height of div

 原文  2017-11-08 04:02:00  5   2    html/ css/ flexbox/ background-color

問題描述

我有一個部分包裝了2格 ，其中一個是視頻，另一個是文本。 在文本塊中，我希望背景色 跨越 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>

2 個解決方案

解決方案1
 1  2017-11-08 04:23:51

只需將背景色從

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

解決方案2
 1 已采納  2017-11-08 04:26:05

您要從.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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 CSS背景無法達到最大高度 HTML，CSS-背景色無法拉伸內部Div寬度的全長 拉伸背景圖像以占據 div 的整個高度 Div不會伸展到窗戶高度 div背景色未達到高度 背景顏色不覆蓋div的全高度 獲取背景顏色以填充div的完整高度 div背景顏色未覆蓋背景圖片的整個高度和寬度div html-正文無法拉伸到全高頁面 背景不伸展
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM