Html 我的沙发为什么这么高？

我的

youtubeMain

div比需要的高很多，这会导致不必要的滚动条。我想不出如何在不影响视频对齐和纵横比的情况下，让这个div的高度达到它所需要的高度。我是刚接触弹性盒子的

HTML:

---

您必须删除高度：100%

html，正文{
保证金：0；
}
*,
*：之后，
*：：之前{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
身体{
背景：url（'http://www.telephonewallpaper.com/artwork/a-game-of-clones--boba-fett_original.jpg“）无重复固定；
-moz背景尺寸：封面；
-webkit背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
溢出：自动；
}
.对{
浮动：对；
}
/*#区域导航条*/
导航{
背景：rgba（0,0,0,0.4）；
盒影：0 3px 5px rgba（0,0,0,0.7）；/*CSS3*/
-moz盒阴影：0 3px 5px rgba（0,0,0,0.7）；/*Firefox*/
-webkit盒阴影：0 3px 5px rgba（0,0,0,0.7）；/*Safari，镀铬*/
字体：粗体1.2em arial，verdana；
位置：固定；
宽度：100%；
}
导航a{
位置：相对位置；
显示：内联块；
利润率：15px 25px；
大纲：无；
颜色：白色；
文字装饰：无；
文本转换：大写；
字母间距：1px；
字体大小：400；
文本阴影：2px2p5pRGBA（255255255,0.5）；
}
导航a：悬停，
导航a：聚焦{
大纲：无；
}
/*括号*/
.navClass a：：之前，
.navClass a：：之后{
显示：内联块；
不透明度：0；
-webkit转换：-webkit转换0.3s，不透明度0.2s；
-moz变换：-moz变换0.3s，不透明度0.2s；
过渡：变换0.3s，不透明度0.2s；
}
.navClass a：：之前{
右边距：10px；
内容：“[”；
-webkit转换：translateX（20px）；
-moz变换：translateX（20px）；
转换：translateX（20px）；
}
.navClass a：：之后{
左边距：10px；
内容：']'；
-webkit转换：translateX（-20px）；
-moz变换：translateX（-20px）；
转换：translateX（-20px）；
}
.navClass a:悬停：：之前，
.navClass a:悬停：：之后，
.navClass a:焦点：：之前，
.navClass a:焦点：：之后{
不透明度：1；
-webkit转换：translateX（0px）；
-moz变换：translateX（0px）；
转换：translateX（0px）；
}
/*#端区*/
/*#区域Youtube示例*/
#青年英语教师{
显示器：flex；
柔性流：行换行；
证明内容：中心；
垫面：5%；
}
#青年英语教师{
利润率：0.2%；
}
#youtubeList img：悬停{
光标：指针；
}
#青年旅行家{
显示器：flex；
证明内容：中心；
}
#youtubeMain iframe{
边缘顶部：1米；
宽度：50%；
身高：50%；
}
/*#endregion*/

---

移除

高度：100%

从

#youtubeMain{
显示器：flex；
身高：100%；
证明内容：中心；
}
问题在于，您已将html定义为100%位于CSS顶部。试试这个

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

身高：100%？？因此，这是整个窗口的100%，youtube视频只是填补了这一空白。删除#youtube上的高度：100%删除iframe上的高度：100%——尽管这可能是也可能不是你想要的。如果你愿意，你甚至可以使用vh和vw测量？我想我应该补充一点，我希望尺寸保持动态。我想我需要像jbutler483指出的那样研究vh和vw的测量值。也许只将内部HTML标记作为100%？内部HTML标记是指youtube视频div吗？这会缩小视频的高度。
#youtubeMain {
  display: flex;
  height: 100%;
  justify-content: center;
}

#youtubeMain iframe {
  margin-top: 1em;
  width: 50%;
  height: 50%;
}

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