Home/ Questions/Q 9164171
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T14:37:04+00:00

I’m working on a single-page scroll-to webdesign, and can’t get this code to work.

  • 0

I’m working on a single-page scroll-to webdesign, and can’t get this code to work.

What I’m trying to do is get the screen height of the user through JavaScript.

Then I want to apply this screen height to my div class, so that I’ll always have a container that is the size of the users screen resolution. A liquid design that always fits the screen, so to speak.

Here’s a short example of where I want the variable screen height to be:

<script type="text/javascript">
function matchHeight() {
$('.container').css('height',$(window).height);
};
</script>

<div class="container"> I want this container to be the height of the users screen resolution. </div>

.container { width:100%; height: /* javascript value */ }

Help will be highly appreciated! Thanks in advance.

Edit: I’ve added a Fiddle of my complete document.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What you are asking for is not difficult at all. All it requires is one nice JavaScript function and a few quick minor changes to your HTML code.

    First, give your “container” <div> an id by making some quick changes to your HTML;

    <div class="container" id="container">
I want this container to be the height of the users screen resolution. 
</div>

    Next define a JavaScript variable that refers to it:

    var container = document.getElementById("container");

    Then use this neat function that I use all the time to get the dimensions of the screen using JavaScript:

    function resize() {
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined') {
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else {
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
container.style.height = viewportheight+"px";
}

    Notice that I put container.style.height = viewportheight+"px"; in the function. This means that every time resize(); is called we will update the dimensions of the browser and reapply those dimensions to the container <div>.

    We will call the resize(); function in the body every time the page resizes, as well as when the page first loads, using this HTML:

    <body onload="resize()" onresize="resize()">

    The function will resize the container <div> to the full page height. Let me know if you have problems with this, or have any questions!

    • 0