Javascript 我已经设置了正文，html元素高度100%，即使div元素高度100%也不起作用

如果我以像素为单位设置div元素的高度，那么我的div元素将获得height属性，并且它的工作状态非常好。但我想换一种方式。我知道，如果我想将div元素高度设置为百分比值，那么首先需要将body和html元素高度设置为百分比值。我做到了，但它不起作用

body，html{
身高：100%；
}
.导航区{
背景色：#DDD；
溢出：隐藏；
位置：固定；
排名：0；
左：0；
宽度：100%；
}
.导航区a{
文字装饰：无；
颜色：黑色；
填充：12px 16px；
浮动：左
}
.滑块区域{
边缘顶部：50px；
背景图片：url(https://www.w3schools.com/w3images/parallax1.jpg);
身高：100%；
背景位置：中心；
背景尺寸：封面；
背景附件：固定；
背景重复：无重复；
}

我的网站徽标
上面的示例使用像素设置图像的高度。如果要使用百分比（例如100%）使图像适合整个屏幕，请将视差容器的高度设置为100%。注意：您还必须

使用100%的视图高度

.slider-area {

高度：100vh

---

}

要设置元素的100%高度，您需要将该元素的100%高度设置为具有正文的直接父元素的100%高度和html元素的100%高度。

谢谢，但我在w3school网站上看到了相同的代码。为什么我的不行？请试试这个。前一个是我的错误。我为此道歉：）好的，但是你能告诉我为什么这个可以工作吗
是的，你可以看到他们在那里做了一个内联css，这就是为什么它在那里工作。我相信我已经发现了问题。它说“要使图像适合整个屏幕，请将父容器的高度设置为100%”。我的滑块区域div元素直接父容器是主div元素。这就是为什么我需要首先设置该元素的height属性：）感谢@Raw Scripter在

.main