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%;添加到“border”类呢？

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

Answer 4

将height: 78%;添加到边框css，然后将height: 20%;添加到标头css中。 Demo

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

4 个答案: