0
こんにちは、html5 + css3で私の最初のサイトを目標としてビルドし始めましたが、ヘッダーの後にビデオを追加しようとすると問題があります。私のビデオがウェブサイトの全幅を満たしている必要があります。私は "幅：100％"で動作しません。ビデオサイズをサイトの幅に塗る方法
「表示：フレックス」を削除すると機能します。 #bodyの中にフレキシブルなボックスを追加する予定があるので、このプロパティが必要になると思います。#bodyの中にフレキシブルボックスを入れたいのであれば、それを "display：flex"に設定する必要がありますか？私は間違っている場合は、私を修正してくださいので、html5 & 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%;
}
ありがとうございました！私はパーセンテージxDのロジックを忘れていました...そして、