CODEWITHSUNDEEP
jqueryhtmlcss
Tom Groot
Tom Groot

Reputation: 1180

Div exact height as window height

The div must have the exact height as the screenheight of the visitor (100%) using jquery.

Jquery:

$(document).ready(function(){
    var height = $(window).height();
    $('.bg').height(height);
});

A very simple code, but isn't working for me.

http://jsfiddle.net/k7b2y/

I have also tried (same result):

$(document).ready(function(){
    var height = $(window).height();
    $('.bg').css('height', height);
});

Upvotes: 0

Views: 117

Answers (3)

Mohammad Sirwan
Mohammad Sirwan

Reputation: 1

body {padding:0px;margin:0px;}
.bg {width: 100%;height:100%;}

Upvotes: 0

Hassan Sardar
Hassan Sardar

Reputation: 4523

Try this:

Fiddle Here: http://jsfiddle.net/k7b2y/6/

body {
    margin:0 auto;
}

Upvotes: 0

Patrick Evans
Patrick Evans

Reputation: 42736

it is giving it 100% of window height, but your html, body also have default margins/paddings by the browser itself you have to reset them to have none

html,body {
    padding:0px;
    margin:0px;    
}

Fiddle

If however you are wanting for it to always have the height when like window resizes etc you need to also set the html/body to have 100% height, and the div to have 100% height as well

html,body {
    padding:0px;
    margin:0px; 
    height:100%;
}
.bg {
    background-color: #333;
    width: 100px;
    height:100%;
}

Fiddle

Upvotes: 4

Related Questions