Question

嗨，大家好我开始在html5 + css3响应中开始构建我的第一个网站作为目标，但我在尝试在标题后添加视频时遇到问题。事情是我需要我的视频填充网站的总宽度。我尝试用＆＃34;宽度：100％＆＃34;它没有用。

当我删除＆＃34; display：flex;＆＃34; #body，但我想我需要这个属性，因为我计划在#body中添加灵活的盒子，如果我想在#body中放置灵活的盒子，我需要将它设置为＆＃34; display：flex＆＃34;对？我是html5＆amp; css3中的新手，所以如果我错了，请纠正我。

如果有人能帮助我那会很棒。谢谢！

HTML：

<!DOCTYPE html>
<html>
<head>
    <link href="style.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
    <div id="logo">
        <a href="#"><img src="imagenes/logo.png"/></a>    
    </div>
<nav id="menuP">
    <ul>
        <li><a href="#">ALL PRODUCTS</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">SAMPLES</a></li>
        <li><a href="#">QUOTE</a></li>
    </ul>
</nav>
<nav id="menuS">
    <ul>
        <li id="account"><a href="#">ACCOUNT</a></li>
        <li id="shop"><a href="#">SHOP</a></li>
        <li id="contact"><a href="#">CONTACT</a></li>           
    </ul> 
</header>
<section id="body"> 
    <section id="slide">
        <video loop id="videoSlide">
            <source src="eu4_ost.webm" type="video/webm"> 
        </video>
    </section>  
</section>
<footer>
</footer>
</body>
</html>

CSS

* {
margin:0px;
padding:0px;
}
header, section, footer, aside, nav, article, hgroup{
display:block;
}
html{
width:100%;
background:white;
height:100%;
font-family:Helvetica;
}
body {      
display:flex;   
background:gray;
justify-content:center;
max-width:2000px;
flex-direction:column;
}
/* -------------------------------- HEADER ------------------------------------ */
header{
width:100%;     
background:#fabe06;    
display: flex;
justify-content: center;    
height:70px;
}
header nav ul{      
    list-style:none;
}
/* ----------------------------------- LOGO ------------------------------------- */
#logo{
    margin:0px 0px 0px 32px;
    width:260px;
    display:flex;
    align-items:center;             
}
    #logo img{
        width:100%;             
    }
/* ----------------------------- MENU PRINCIPAL ---------------------------------- */
#menuP{
    display:flex;       
    font-family:Patua One;
    font-size:17px;
    flex:2;
    margin:0 50px;
    justify-content:center;         
    align-items:center      
}
#menuP ul li{       
    display:inline-block;
    margin:0 15px;      
}
#menuP ul li a{
    text-decoration:none;
    color:black;            
}
/* ----------------------------- MENU SECUNDARIO ---------------------------------- */
#menuS{

    flex:1;
    display:flex;
    justify-content:flex-end;
}
#menuS ul{
    display:flex;
}
#menuS ul li a{
    height:70px;        
    width:70px;     
    display:inline-block;               
    border-left:solid 1px;
    border-color:#eab309;       
    text-indent:-99999px;
    /*background:yellow;*/
}   
#menuS ul li a{

}
header nav ul li#account a{
    background-image:url(imagenes/account.png); 
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center; 
    background-size:20%;
}
header nav ul li#shop a{
    background-image:url(imagenes/shop.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    background-size:25%;        
}
header nav ul li#contact a{
    background-image:url(imagenes/contact.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    background-size:25%;
}
/*---------------------------- BODY -------------------------*/
#body {
width:100%;
background:yellow;
display:flex;
flex-grow:1;
}
#videoSlide{    
width:100%;
}

Answer 1

在身体中使用两个div并从身体上移除弯曲。

第一个div是视频

其次是以主要内容展示

Answer 2

好吧，非常简单，问题是即使视频具有width: 100%属性，其父级也不会。百分比单位是根据父亲的宽度或高度使用的，所以如果父母不是整页宽度，它就不会工作。

只需将其添加到style.css：

即可

#slide
{
width: 100%;
}

另外，只是注意到你从未关闭<nav>元素.menuS，所以如果我是你要避免进一步的麻烦，我就这样做。

祝你好运。

如何使视频大小填充网站宽度

2 个答案: