javascript - 将 div 的高度设置为页面中的剩余高度

Question

我在这个问题上找到了多个答案，但它们似乎都不起作用，尤其是 CSS 方式。我已经转移到 jQuery 方法，但是，它也不起作用。

我现在有两个 div：一个标题和一个内容 div。标题的高度为 120px，我希望内容 div 位于标题下方并具有屏幕的剩余高度。我找到了多个答案，我试图实施这些方法，但是，它仍然没有用。所以这就是我问这个问题的原因。

这是我当前的代码：

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    var one = $('#header').height(),
    two = parseInt($(window).height() - one);
    $('#border').height(two)
</script>

<div class="header" id="one">hi</div>
<div class="border" id="two">hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br><div>

CSS：

body {
    margin: 0;
    background-image:url(../images/bg.png);
    background-repeat:repeat;
    color: #FFFFFF;
    height: 100%;
}

.header
{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 120px;
    background-color: black;
    box-shadow: 0px 0px 40px #000000;
}

.border
{
    position: absolute;
    left: 25%;
    z-index:0;
    top: 120px;
    width: 50%;
    background-color: white;
    color: black;
    padding: 5px;
    overflow-y:scroll;
}

谢谢！

Answer 1

试试这个

<div class="header" id="one">hi</div>
<div class='border' scrolling="auto" style="width: 100%;height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%" id="two">

Answer 2

据我所知，您可以通过

纯css使用position:absolute.

并在 jQuery 的帮助下

我已经通过两种方式解决了您的问题，请查看以下解决方案

我已经检查并在您的代码中发现了一些错误

1. 在您的html代码中，您忘记关闭您的<div id="two">. * 2. 在你的css代码中，你应用height:100%到你的类中，这些都是反射的。* 3. 在您的jQuery代码中，您尝试设置高度但选择器错误。这就是你的代码不起作用的原因

所以我已经修复了它在我的情况下你必须改变你的css代码，html代码和jquery代码检查这个小提琴http://jsfiddle.net/yNg95/2/

这是HTML

<div class="header" id="one">hi</div>
<div class="border" id="two">
    hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>
</div>

这是CSS代码

*{margin:0; padding:0;}
body {
    background-image:url(../images/bg.png);
    background-repeat:repeat;
    color: #FFFFFF;
    overflow:hidden;
}

.header{
    position: absolute;
    left: 0;
    top: 0;
    right:0;
    height: 120px;
    background-color: black;
    box-shadow: 0px 0px 40px #000000;
}

.border{
    position: absolute;
    left: 25%;
    z-index:0;
    width: 50%;
    top:120px;
    /*height: 100%;*/
    background-color: white;
    color: black;
    padding: 5px;
    overflow-y:scroll;
}

这是jQuery代码

var one, two;
    one = $('.header').outerHeight(true);
    two = $(window).height() - one;
    console.log(one, two)
    $('#two').css({height : two})

这是纯纯的另一种选择的小提琴css

http://jsfiddle.net/sarfarazdesigner/neR4U/

Answer 3

如果你只是添加height: 100%;到“边界”类怎么样？

http://jsfiddle.net/yNg95/1/

Answer 4

添加height: 78%;到您的边框 css，并添加height: 20%;到您的标题 css。演示