0

JQuery 

    $(window).ready(function(){

    var w = $(window).width();//to detect the width of the browser
    var h = $(window).height();//to detect the height of the browser

    $(window).resize(function(){

        var w = $(window).width();//new width of the browser
        var h = $(window).height();//new height of the browser

        $("#left").css('height'+ h 'px.');//this is where I'm not sure how to assign height      value according to the browser size.

    });  

    });

My css

   #main
{
    width: 100%;
    height: 100%;
    position: relative;
    background: #000000;
}
#left
{
    width: 20%;
    height: 650px;
    position: relative;
    float: left;
    background: #666666;

}
#right
{
    width:80%;
    height: 650px;
    position: relative;
    float:right;
    background: #ff9900;
}

My Html

   <div id="main">
        <div id="left">
        </div>

        <div id="right">
        </div>

    </div>

Now the problem is the height of left and right DIV. if I set the height:100%; it follows the content height ,which I don't want . I want the height stretched down to fit the browser height. So if I use, height:650px; it works but how if the page resized to smaller or bigger size? How to detect the size of the browser the page being viewed and proportionally change the height so that there won't be scrollbar?

Kalaivani Nair
  • 47
  • 1
  • 9

6 Answers6

1

It was default mechanism of a div.. no need to write anything for this just put margin and padding to zero for both <body> and <div>.

Or If you are interested in jquery or javascript.. Then you can do it better by using

$(window).innerWidth() and $(window).innerHeight() //Above code returns the viewport area of the browser

methods in-spite of using

$(window).width() and $(window).height(). //This code returns the entire browser width and height.

Lakshmi Prasanna
  • 97
  • 1
  • 7
  • 1
    Thanks @Lakshmi! Is there nothing can be done to fit the div height according to the browser height? All my jquery doesn't work .so stick to fix the height in px instead of %. But I'm worried if the page viewed in larger screen. The body colour will be shown in the empty space right? – Kalaivani Nair Nov 22 '13 at 05:41
1

Here this seems to work better for me. Although calc() is not that widely supported by browsers but you could still you static height in %.

http://codepen.io/magnus16/pen/BlpeK

Use with css reset and adjust your margins accordingly and you should be good to go.

Lokesh Suthar
  • 3,201
  • 1
  • 16
  • 28
0

It looks like your trying to make the div the full length of the browser window. If so, using something like div {height: 100%; padding: 0; margin: 0; } wont work if you have other divs in the way.

Try this:

div { 

position:fixed;
top:0;
left:0;
right:0;
bottom: 0;

}

that will make your div the height of the entire browser even with the rest of your site in the way.

example in a fiddle:

http://jsfiddle.net/5MUTy/1/

agconti
  • 17,780
  • 15
  • 80
  • 114
  • a position should be absolute here? – A.T. Nov 22 '13 at 04:50
  • Try changing absolute in the fiddle. If you do so the height wont take up the entire screen. – agconti Nov 22 '13 at 04:52
  • It seems strange I know. I was doing this last week and ran into this problem using absolute myslef, and had to ask the question: http://stackoverflow.com/questions/20021706/popup-div-to-fill-entire-browser-width-and-height . The answer was to set it to fixed. – agconti Nov 22 '13 at 04:54
  • with "fixed" you can't scroll down to access content at bottom of page,if page height is more than screen height – A.T. Nov 22 '13 at 04:56
  • @Arun the whole point of this answer is to set div height = page height. You do so by specifying top, left, right, and bottom. That would never be an issue. – agconti Nov 22 '13 at 05:00
  • 1
    yes specifying top, left, right, and bottom will do that, but fixing content is not solution – A.T. Nov 22 '13 at 05:03
  • it is. check the fiddle I provided and check this question as reference: http://stackoverflow.com/questions/20021706/popup-div-to-fill-entire-browser-width-and-height . Please feel free to give your own answer. – agconti Nov 22 '13 at 05:04
  • The div is the height of the rendered home page. Including all of the elements. You would be able to scroll down in the full view mode of the fiddle if the content is greater than the view able area. In the fiddle currently, the div encompasses all elements, so scrolling is impossible if there's nothing to scroll too. This is a trick for grey masks of newsletter pop-ups. Check one such pop-up out at remodo.com. You'll be able to scroll :-) – agconti Nov 22 '13 at 05:28
0

In the css document or within style tags,

html,body{
width:100%;
height:100%;
}
div{
width:100%;
height:100%;
}
user2756339
  • 685
  • 1
  • 10
  • 17
0

Below is correct syntax to add CSS in div through jQuery.

$("#left").css('height', h +'px'); // where h is height variable.
Viken Patel
  • 446
  • 2
  • 9
  • Thanks for the correction. Can you tell me how to detect the browser size and display it on browser? – Kalaivani Nair Nov 22 '13 at 05:36
  • You did that in your code. Below is browser width and height which you can get on resize. var w = $(window).width();//new width of the browser var h = $(window).height();//new height of the browser Please note: innerwidth() will not work with window. you can refer jQuery docs. http://api.jquery.com/innerWidth/ – Viken Patel Nov 22 '13 at 06:05
0

Well, I found that, to make a DIV fit to the bottom of a page just need to add postion:absolute. but since I'm having two DIVs ,one on left and another on the right, I add postion:fixed to the left DIV and postion :relative ,float:right to the right DIV. prior to that I added DIV{position:fixed}, then only it worked in Chrome and Firefox but not in IE10. So I added height:100% to the DIV tag..now it works in all browsers..

Thanks for all for sharing your thoughts.Bytheway I didn't use any jquery so far only css!

Kalaivani Nair
  • 47
  • 1
  • 9