Css 整版图像

我正在尝试重新创建一个页面，但是正在清理css。我不明白为什么在原始页面上第一张图片被完全显示，而在我的页面上没有。CSS对我来说似乎是一样的。这是页面片段

<section id="mega-img">
  <div class="inner">
    <h1>title</h1>

    <p>Some text</p>
  </div>
<div class="big-bg"></div>

我错在哪里

---

它们是同一个页面，只有CSS更改。我希望我的页面显示与原始页面相同的完整图像。

看起来您已经删除了新样式表中的html和身高。原始站点声明正文和html为100%，尝试将其重新添加到css中。如果你需要一把小提琴，请告诉我。：）

您的原始页面有

html，正文{height:100%；}

。将其添加到新站点，然后

#mega img{height:100%}

将有一些东西可以发展

---

请查看此视频以获得良好的解释

您的原始页面有

html，body{height:100%；}

因为有人刚刚用相同的答案回答了问题，请让我知道这是否有效，如果您愿意，我可以将其移动到一个答案，您可以接受。是的，正如所说的那样。既然你先回答了，我就把你的作为答案，如果你把它作为答案的话。顺便说一下，我想理解为什么会发生这种情况，因为如果元素A包含元素B，而A小于100%，那么B不能是100%。如果我是6英尺高的孕妇，我不能生一个6英尺高的孩子。为了充分披露，我不是女人，我没有怀孕，我身高超过6英尺。请在这里添加有意义的代码和问题描述。不要只是链接到需要修复的站点——否则，一旦问题解决或者你链接到的站点无法访问，这个问题将对未来的访问者失去任何价值。发布一个能证明你的问题的帖子会帮助你得到更好的答案。有关更多信息，请参阅“谢谢！”！对这就是答案。现在，我想了解为什么必须将高度100%应用于html和正文，以便在其内部的div上允许100%的高度。我们需要告诉浏览器窗口，它将变成100%的高度。推荐此答案谢谢，非常有用

#mega-img {
  color: #fff;
  overflow: hidden;
  position: relative;
  height: 100%;
  padding: 5em 0 3em 0;
  width: 100%;
}
#mega-img .inner {
  color: #fff;
  margin-left: 5%;
  width: 45%;
  padding: 15px;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.2);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000, endColorstr=#330000);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000, endColorstr=#330000)";
}
#mega-img .inner h1 {
  color: #fff;
  font-weight: bold;
  line-height: 0.8em;
  font-size: 4em;
}
#mega-img .inner p {
  color: #fff;
  font-weight: bold;
  line-height: 1.2em;
  font-size: 1.2em;
}
.big-bg {
  background-image: url(../images/photo/foto_big_home.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}