Html Can'；t在特定属性上渲染多个背景图像

在这个css文件中，我在body中使用了“backgroundimageurl”，然后在另一个名为container的类中使用了另一个“backgroundimageurl”。但是在

.container

类中，我面临高度属性的问题。如果我在高度中使用一个明确的参数，如

height:500px然后我的两个背景图像（主体和容器类）被完美地渲染

body{
  background: url('../images/body-bg.gif') 50% 0;
  font:12px/18px arial;
  color: #717171;
  margin:0;
  padding: 0;
  position: relative;
}
.container{
    background: url('../images/main-bg.jpg'); 
    width: 100%;
    height: 500px;
}

但是如果我使用
height:80%/100%..etc
或使用
minheight:80%/100%..etc
则显示屏上仅显示我的
身体
背景图像。在这种阶段，我如何解决我的问题

.container{
        background-image: url('../images/main-bg.jpg'); 
        width: 100%;
        height: 80%;
    }

或-

注意：基本上，我是从一个视频中编写这段代码的，在该视频中，两幅图像都得到了完美的渲染。这里没有语法或目标路径的问题。
如果没有有效的定位，就不能以百分比形式设置div的高度。为其指定一个位置或在
vh
中使用高度，而不是
%

请注意，
vh
将给出视口的高度，但
%
将给出父视图的高度

如果要指定绝对位置，请不要忘记对其父容器应用相对定位。
问题是，您告诉容器的高度为100%，但与什么相比？要使相对单位适用于高度，父级需要定义高度

您可以使用
flex-grow
作为变通方法

正文{
最小高度：100vh；
显示器：flex；
}
.集装箱{
柔性生长：1；
}
非常感谢。我明白你的想法。但我不能理解我做的和我在视频中做的项目完全一样。那里工作得很好，但我做不到。甚至我在浏览器中运行了整个代码，我也得到了一个完美的结果。但是当我运行代码片段时，我遇到了上面的问题。非常感谢。我明白你的想法。但我不能理解我做的和我在视频中做的项目完全一样。那里工作得很好，但我做不到。甚至我在浏览器中运行了整个代码，我也得到了一个完美的结果。但是当我运行代码片段时，我遇到了上面的问题。
.container{
        background-image: url('../images/main-bg.jpg'); 
        width: 100%;
        min-height: 100%;
    }