0

How can I make the height of a div tag auto resize according to the height of the browser?
When I do height: 100%, it only resizes based on how much text is in there.

Here is the web page and it's the first div, the one with the blue background is the one that I am trying to make the height auto resize:
http://rachelchaikof.com/awareness/

4 Answers 4

2

Actually you must be missing to set an height: 100%; for parent elements, also make sure you use this to make your div height 100%

html, body {
   height: 100%;
   width: 100%;
}
2
  • By itself, this doesn't work in standards mode (i.e. with a proper DOCTYPE).
    – Mr Lister
    Dec 8, 2012 at 7:57
  • My apologies, I don't know what I did wrong there. I was pretty sure I was right, and I made a q&d test file, but I must have had a typo or something. Sorry.
    – Mr Lister
    Dec 8, 2012 at 8:20
0
100% height - resize window problem

"height:100%" means 100% of the browser window. If the page beyonds the browser window (ie. needs scrolling to access) those bits of the page are outside the elements set to height:100%. Which if you have backgrounds or other effects (e.g. borders) won't extend beyond the first 100%.

The correct way to handle things is
selector {min-height: 100%;} /* for proper browsers */
* html selector {height: 100%;} /* for IE */

If you use min-height in this way, you must ensure all the antecedent elements have a fixed height of 100% (ie. html & body).

or you can use Jquery.

$(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
});
0

height:100% means the same height as the parent, that is, the element your div sits in. So if you want to make it the same height as the browser, you'll need to make all its ancestors 100% high, all the way up to html!

0

When is comes to responsive design there are many creative ways to approach the issue at hand.

You could try using percentages to make your Design more responsive. Using percentages is a safe bet for maximizing on the users viewport.

eg.

html, body { 
height: 100%; 
width: 100%; 
}

From there you can play with your site containers and go more specific.

Also some JavaScript in your head section of the HTML can help you detect screen sizes and adjust different CSS rules accordingly:

<!-- hide script from old browsers
//<![CDATA[

var windowWidth=screen.availWidth;
var windowHeight=screen.availHeight

function sniffer() {
var el=document.getElementById("body"); 
if(screen.width<=600) {
           el.style.width='100%';
           el.style.height= windowHeight;
           el.style.margin="auto";               
 } 
}
onload=sniffer;
//]]>
// end hiding script from old browsers -->

The JavaScript above is checking if the user's screen is smaller or equal to 600px; if so, it adjusts the width, height, margin rules for the body element.

Hope this helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.