Question

我的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%;
}

Answer 1

您必须删除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>

Answer 2

删除height: 100%;

这

#youtubeMain { display: flex; height: 100%; justify-content: center; }

Answer 3

问题是你已经在CSS的顶部将你的html定义为100％。试试这个。

html {
    margin: 0;
}
#youtubeMain {
    display: flex;
    height: 600px;
    justify-content: center;
}

为什么我的div的高度如此之大？

3 个答案: