Q:

Set a div's height to the remaining height in the page

I've found multiple answers on this question, but they all do not seem to work, especially the CSS way. I've moved to the jQuery method, however, it doesn't work neither.
I've got two divs at the moment: A header and a content div. The header has a height of 120px, I'd like the content div to be located below the header and have the remaining height of the screen. I've found multiple answers, I've tried to implent those methods, however, it still didn't work. So that's why I'm asking this question.
Here is my current code:
    <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;
}

Thanks!

A:

From my knowledge you can achieve this by 
pure css using position:absolute.
and with the help of jQuery
I've solve your problem by both ways check out below solutions
I've checked and find some bugs in your code 
1. in your html code you forget to close your <div id="two">.
*2. In your css code there you applied height:100% to your class which are reflecting.*
3. In your jQuery code you are trying to set height but with wrong selectors. That's why your code is not working
so i've fixed it in my case you have to change in your css code, html code and jquery code
check this fiddle http://jsfiddle.net/yNg95/2/
here is 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>

here is css code
*{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;
}

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

here is the fiddle for another option only by pure css
http://jsfiddle.net/sarfarazdesigner/neR4U/

