Установите высоту div равную размеру экрана

У меня есть элемент div в twitter-bootstrap, который будет иметь содержимое, которое будет перетекать вертикально за пределы экрана.

Я хотел бы, чтобы div занимал высоту размера окна браузера, а оставшаяся часть содержимого прокручивалась вертикально в окне.

У меня есть образец, который не работает @jsFiddle

#content {
    border: 1px solid #000;
    overflow-y:auto;
    height:100%;
}

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">Side Bar</div>

        <div class="span9" id="content">
            Content Bar Example Content
        </div>
    </div>
</div>

Я публикую этот вопрос после прочтения таких вопросов, как SO Questions

ИЗМЕНИТЬ -

Извините, ребята, я догадываюсь, что у меня был неправильный вопрос.

Я бы хотел, чтобы мой div должен заполнить остальную часть вертикального пространства на экране.

Было бы здорово, если кто-то может предложить отзывчивое решение

Ответ 1

Использование CSS {height: 100%;} соответствует высоте родительского элемента. Это может быть что угодно, то есть меньше или больше экрана. Использование {height: 100vh;} соответствует высоте области просмотра.

.container {
    height: 100vh;
    overflow: auto;
}

Согласно официальным документам Mozilla, 1vh - это:

Равно 1% от высоты исходного окна просмотра, содержащего блок.

Ответ 2

Вы также должны указать height для родительского элемента! Проверьте эту скрипку.

CSS:

html, body {height: 100%;}

#content, .container-fluid, .span9
{
    border: 1px solid #000;
    overflow-y:auto;
    height:100%;
}

JavaScript (с использованием jQuery)

$(document).ready(function(){
    $(window).resize(function(){
        $(".fullheight").height($(document).height());
    });
});

Ответ 3

попробуйте это

$(document).ready(function(){
    $('#content').height($(window).height());
});

Ответ 4

использовать

 $(document).height()

свойство и установить в div из script и установить

  overflow=auto

для прокрутки