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

Have you tried something like .div{ height: 100vh; } – Arun Jose May 03 '16 at 11:01 — Arun Jose, May 03 '16 at 11:01

Kurt Van den Branden · Answer 1 · 2017-10-31T15:19:21.817

102

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.

edited Oct 31 '17 at 15:19

answered Jan 08 '17 at 20:56

Kurt Van den Branden

11,995
10
76
85

score 30 · Answer 2 · edited Dec 12 '18 at 10:09

30

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());
    });
});

edited Dec 12 '18 at 10:09

Prashant Pokhriyal

3,727
4
28
40

answered Aug 29 '12 at 06:46

Praveen Kumar Purushothaman

164,888
24
203
252

Is there a reason to use js here? Does this css have problems with some browsers/devices? – Gherman Oct 23 '14 at 08:39
@German Please check the answer with more votes. It has only JS Solution, while mine concentrates on both JS and CSS. – Praveen Kumar Purushothaman Oct 23 '14 at 10:33
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? – Gherman Oct 23 '14 at 11:49
1

A simple "No, you don't have to use JS. Yes, you can use just CSS." would have answered German's question. – Feb 01 '17 at 15:07
It's jquery way of doing, not pure Javascript! – Adil Aug 15 '18 at 10:17
@adi Why do you need Pure JavaScript, when you have jQuery included with Bootstrap? Thanks for the edit though. – Praveen Kumar Purushothaman Aug 15 '18 at 17:30
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 – Adil Aug 16 '18 at 10:00
@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. – Praveen Kumar Purushothaman Aug 16 '18 at 13:42

score 14 · Answer 3 · answered Aug 29 '12 at 06:48

14

try this

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

answered Aug 29 '12 at 06:48

gaurang171

9,032
4
28
30

9

**-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. – Slipp D. Thompson Oct 11 '14 at 21:55
Also won't work If the window size or orientation changes. – Chris Gunawardena Nov 29 '16 at 10:01
recommended to use min-height – Shiva Dec 07 '16 at 13:22

score 0 · Answer 4 · answered Aug 29 '12 at 06:44

0

use

 $(document).height()

property and set to the div from script and set

  overflow=auto

for scrolling

answered Aug 29 '12 at 06:44

Aravindhan

3,566
7
26
42

score 0 · Answer 5 · answered Jan 06 '19 at 18:58

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

Set div height equal to screen size

5 Answers5

CSS:

JavaScript (using jQuery) Way:

Linked

Related