Set div height equal to screen size

Question

I have a div element in twitter-bootstrap which will have content that will overflow vertically outside the screen.

I would like the div to take the height of the size of the browser window and let the rest of the content scroll vertically within the window.

I have a sample that is not working @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>

I am posting this question after reading so questions like SO Questions

EDIT--

Sorry guys I guess I got my question wrong.

What I would like is that my div must fill the rest of the vertical space in the screen.

It would be great if someone can suggest a responsive solution

Beckham

Have you tried something like .div{ height: 100vh; } – Co

Answer 1

Using CSS {height: 100%;} matches the height of the parent. This could be anything, meaning smaller or bigger than the screen. Using {height: 100vh;} matches the height of the viewport.

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

According to Mozilla's official documents, 1vh is:

Equal to 1% of the height of the viewport's initial containing block.

Loren

Answer 2

You need to give height for the parent element too! Check out this fiddle.

CSS:

html, body {height: 100%;}

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

JavaScript (using jQuery) Way:

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

Dunc

Is there a reason to use js here? Does this css have problems with some browsers/devices? – Hark

@German Please check the answer with more votes. It has only JS Solution, while mine concentrates on both JS and CSS. – Dunc

That's not what I'm asking. I'm asking why can't I use only css. Does it have drawbacks I don't notice? – Hark

A simple "No, you don't have to use JS. Yes, you can use just CSS." would have answered German's question. – Inness

It's jquery way of doing, not pure Javascript! – Congelation

@adi Why do you need Pure JavaScript, when you have jQuery included with Bootstrap? Thanks for the edit though. – Dunc

You welcome. Firstly, I think jquery and js should be considered separate especially while answering to questions here. Secondly, there're lot of situations where devs wanna avoid maximum possible jquery in their projects like mostly in ReactJs. So my intention is just to clearly mention that its Jquery way of doing – Congelation

@adi Thanks for your response. But here that doesn't matter. The OP already uses Bootstrap, so jQuery is built-in here. :) No matter what jQuery is included. – Dunc

Answer 3

try this

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

Unswerving

-1 for a JS-only solution. JS can be a nice fallback solution for layout, but as the primary layout mechanism— I just can't agree with that. – Philippeville

Also won't work If the window size or orientation changes. – Alonzoaloof

recommended to use min-height – Accomplishment

Answer 4

use

 $(document).height()

property and set to the div from script and set

  overflow=auto 

for scrolling

Squire

Answer 5

This worked for me JsFiddle

Html

..bootstrap
<div class="row">
  <div class="col-4 window-full" style="background-color:green">
    First Col
  </div>
  <div class="col-8">
    Column-8
  </div>
</div>

css

.row {
   background: #f8f9fa;
   margin-top: 20px;
}

 .col {
   border: solid 1px #6c757d;
   padding: 10px;
}

JavaScript

var elements = document.getElementsByClassName('window-full');
var windowheight = window.innerHeight + "px";

fullheight(elements);
function fullheight(elements) {
    for(let el in elements){
        if(elements.hasOwnProperty(el)){
            elements[el].style.height = windowheight;
        }
    }
}

window.onresize = function(event){
     fullheight(elements);
}

Checkout JsFiddle link JsFiddle

Finalize