Question

请原谅新手提出的问题，我确定我想要做的事情很简单，但在寻找解决方案时我必须正确地写下来。

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

我明白这是我需要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（）：

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

Answer 2

jQuery的：

这是一个现场演示：http://jsfiddle.net/zyrc0tbb/

<head>
 <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
 <script>
     $(document).ready(function () {
        var indexd = parseInt($(document).height()) - parseInt($('.slider-wrapper').css('height')) + 'px';
        $('#container').css('height', indexd);
     });
 </script>
</head>

Answer 3

你可以使用css3 calc函数，不需要javascript：

.container {
    height: calc(100% - 300px)
    min-width: 100%;
}

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

如果您想在标记中使用make .slider-wrapper自动使用嵌套部分，请执行以下操作：

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

Answer 4

我假设你想要像this这样的东西。＃top-bar和＃slide-wrapper具有预设高度并且位置：固定。由于顶部和底部值，＃container将适合它们之间。 #container也有位置：固定。

如果#container中的内容高于#container div，此解决方案将创建一个奇怪的滚动条。

对此的一个简单修复是对#container使用position：relative并在顶部和底部添加边距。

无论如何，你绝对不需要css3或javascript来做你想要的。您只需要阅读位置属性即可。我确信在互联网上有足够的信息来弄清楚它是如何工作的。

示例：

http://jsfiddle.net/e0tpnojf/

<强> HTML

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

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

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

<强> CSS

#top-bar{
    width: 100%;
    background: blue;
    height: 100px;
    position: fixed;
    top: 0px;
}
#container{
    width: 100%;
    background: yellow;
    top: 105px;
    bottom: 105px;
    position: fixed;
}
#slider-wrapper{
    width: 100%;
    background: red;
    height: 100px;
    position: fixed;
    bottom: 0px;
}

如何将容器的高度设置为视口高度减去300px的高度滑块？

4 个答案: