tomtomthompson tomtomthompson - 2 months ago 14
HTML Question

How to resize a div to clients viewport height?

Ok, so i want to have a series of divs which are the exact width and height of the user's browser window, regardless of the screen size. I can easily make the divs stretch horizontally with "width: 100%;" but i cant work out how to make the height stretch itself. I am guessing that i need to use some bit of javascript to judge the height, and then another piece to resize the seperate divs. Unfortunately I am a complete javascript n00b and after two hours of seemingly fruitless searching and coming up with about 100 "solutions" this was as far as id gotten (Im sure that at some point I have probably been closer to the answer):

var viewportHeight = "height:" + document.documentElement.clientHeight;

getElementById('section-1').setAttribute('style', viewportHeight);



<div class="section" id="section-1"></div>

<div class="section" id="section-2"></div>

<div class="section" id="section-3"></div>


edit:
ah i should be more clear, im attempting to have all three divs take up the entire screen, so you have to scroll down to see each one - almost like seperate slides. The idea is that each one takes up the entire screen so you cant see the next section until you scroll down, rather than having three divs which take up a third of the screen.

Answer

If you haven't already tried it, you'll want to look at parent:child inheritance of elements within the DOM by way of using CSS.

What I want to STRESS is that everyone giving you JS hacks to accomplish this is not only providing you with overkill (YOU did ask for a JavaScript solution, so they gave it to you!), but it's also a deviation from standards. HTML is for structure, CSS is for presentation, and JavaScript is for behavioral aspects... setting a div to the width of the viewport on load is a PRESENTATION aspect and should be done in CSS... not JavaScript. If you were trying to change the width based on events or user interaction, then yes JavaScript is your friend... but stick with just HTML and CSS for now.

The trick is that most elements have an undefined height - and height is later defined by the content that the element holds.

If you want to 'trick' an element into having a height other than what it wants to default to, you'll have to explicitly define it. Since you want to inherit your height from the viewport, you'll have to define the height at the top and bring it down...

You might be in luck and can avoid JavaScript altogether (unnecessary). Just use CSS.

Try something like:

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

Now, when you try to set your div's later on, specify width: 100% and the height gets inherited from the html --> body --> div.

Try that and see if that solves your problem - if not, point us to a website, a pastebin, or a SOMETHING with code in it that we can just show you how to do it (whereas what you posted for code was an attempt in JavaScript which is only 1 part of the code - post the full thing either to a server or temp site like pastebin).

Here is some sample code I wrote (tested in Chromium):

The HTML:

<html>
<head>
    <title>Test Divs at 100%</title>
    <link rel="stylesheet" type="text/css" href="divtest.css"
</head>
<body>
<div class="test1">aef</div>
<div class="test2">aef</div>
<div class="test3">aef</div>
</body>
</html>

The CSS:

html, body {
    width: 100%;
    height: 100%;
    background-color: #793434;
    padding: 0;
    margin: 0;
}

div {
    height: 100%;
    width: 100%;
}

.test1 {
    background-color: #E3C42E;
}

.test2 {
    background-color: #B42626;
}

.test3 {
    background-color: #19D443
}