http://jsfiddle.net/up71qeyk/4/
我的youtubeMain div比需要的高得多，这会导致不必要的滚动条。我无法弄清楚如何仅使该div的高度达到所需的高度，而又不会弄乱视频的对齐方式和宽高比。我是弹性盒的新手。
HTML：
<div id="youtubeMain">
<iframe width="560" height="315" src="//www.youtube.com/embed/xInh3VhAWs8" frameborder="0" allowfullscreen />
</div>
CSS：
#youtubeMain {
display: flex;
height: 100%;
justify-content: center;
}
#youtubeMain iframe {
margin-top: 1em;
width: 50%;
height: 50%;
}
最佳答案
您必须删除height:100%
html, body {
margin: 0;
}
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: url('http://www.telephonewallpaper.com/artwork/a-game-of-clones--boba-fett_original.jpg') no-repeat fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: auto;
}
.floatRight {
float: right;
}
/*#region Nav Bar */
nav {
background: rgba(0, 0, 0, 0.4);
box-shadow: 0 3px 5px rgba(0,0,0,0.7); /* CSS3 */
-moz-box-shadow: 0 3px 5px rgba(0,0,0,0.7); /* Firefox */
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.7); /* Safari, Chrome */
font: bold 1.2em arial, verdana;
position: fixed;
width: 100%;
}
nav a {
position: relative;
display: inline-block;
margin: 15px 25px;
outline: none;
color: white;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 2px 2px 5px rgba(255,255,255,0.5);
}
nav a:hover,
nav a:focus {
outline: none;
}
/* Brackets */
.navClass a::before,
.navClass a::after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
.navClass a::before {
margin-right: 10px;
content: '[';
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
}
.navClass a::after {
margin-left: 10px;
content: ']';
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
}
.navClass a:hover::before,
.navClass a:hover::after,
.navClass a:focus::before,
.navClass a:focus::after {
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
}
/*#endregion*/
/*#region Youtube Example */
#youtubeList {
display: flex;
flex-flow: row wrap;
justify-content: center;
padding-top: 5%;
}
#youtubeList img {
margin: 0 2%;
}
#youtubeList img:hover {
cursor: pointer;
}
#youtubeMain {
display: flex;
justify-content: center;
}
#youtubeMain iframe {
margin-top: 1em;
width: 50%;
height: 50%;
}
/*#endregion*/<body>
<nav class="navClass" id="nav">
<a href="https://reddit.com">Fabrication Parts</a>
<a href="#">Custom Cages</a>
<a href="Tools.html">Tools</a>
<a href="YoutubeExample.html">Badass Vids</a>
<a href="Contact.html">Contact Us</a>
<a href="Home.html" class="floatRight">Home</a>
</nav>
<div id="youtubeList">
<img src="http://img.youtube.com/vi/xInh3VhAWs8/mqdefault.jpg" />
<img src="http://img.youtube.com/vi/xInh3VhAWs8/mqdefault.jpg" />
<img src="http://img.youtube.com/vi/xInh3VhAWs8/mqdefault.jpg" />
</div>
<div id="youtubeMain">
<iframe width="560" height="315" src="//www.youtube.com/embed/xInh3VhAWs8" frameborder="0" allowfullscreen />
</div>
</body>