Установите высоту div на оставшуюся высоту на странице

Question

Я нашел несколько ответов на этот вопрос, но все они не работают, особенно способ CSS. Я перешел к методу jQuery, но он не работает.

У меня есть два div на данный момент: заголовок и контент div. Заголовок имеет высоту 120 пикселей, я хотел бы, чтобы содержимое 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

Из моих знаний вы можете достичь этого путем

чисто 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 2

Как насчет того, если вы просто добавите height: 100%; в класс «border»?

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

Answer 3

Добавить height: 78%; в ваш граничный CSS, а также добавить в свой height: 20%; заголовка CSS. Demo

Answer 4

Попробуйте

<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">