javascript - 如何将容器的高度设置为视口(viewport)高度减去 300 像素的高度 slider ？

Question

请原谅我的新手问题，我确定我想做的很简单，但是在寻找解决方案时我必须用正确的措辞。

基本上我想在 html 中将一个部分设置为视口(viewport)的高度减去导航栏的高度和底部的一个小 slider 。

我知道这是我需要 Javascript 的东西？如果有人可以提供帮助，那就太好了。

我知道我可以

    .container {
        height: 100%;
        margin-top: -300px;
        min-width: 100%;
    }

    .slider-wrapper {
        height: 300px;
        min-width: 100%;
    }

但它确实没有达到预期的效果，因为它会切断容器的顶部。是否有某种 Jquery 数学可以用来从 .container 的高度中减去 .slider 的高度？

抱歉，正如评论中所要求的，这里还有一些标记，我只包含了容器部分，因为它们是目前我唯一需要与之交互的部分。这是 html

    <section class="top-bar">
    </section>

    <section id="container">
    </section>

    <section class="slider-wrapper">
    </section>

这就是目前构成屏幕实际布局的三个容器。所以这是我为 .container 准备的 css:

    #container {
        background: url(../img/cafe-background.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        width: 100%;
        height: 100%;
        position: relative;

所以我只需要从这个容器中减去 .slider-wrapperunderneath 的高度。

Answer 1

如果我正确理解你的问题，只需将 calc() 与视口(viewport)高度单位一起使用:

.container {
        height: calc(100vh - 300px);
}