How to resize a div to clients viewport height?

javascript html height

10,591

Solution 1

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
}

Solution 2

try this

div#welcome {
  height: 100vh;
  background: black;
  color: white;
}
div#projects {
  height: 100vh;
  background: yellow;
}

<div id="welcome">
  your content on screen 1
</div>

<div id="projects">
  your content on screen 2
</div>

it should work for you, but little support in IE

10,591

Author by

tomtomthompson

Updated on June 05, 2022

Comments

tomtomthompson almost 2 years
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.
tomtomthompson over 10 years

ah i should have been 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.
tomtomthompson over 10 years

that doesnt seem to work either, heres what i have got jsfiddle.net/vsSSZ
ced-b over 10 years

@tomtomthompson ah... that works almost the same. See edited css and fiddle.
Justin Carroll over 10 years

here jsfiddle.net/vsSSZ/2. Sorry I forgot to add semicolons to the first example (which you used and in your JSFiddle). It now works just fine.
tomtomthompson over 10 years

hi, thanks for the suggestion, but it doesnt seem to work for me i must be implementing it wrong? I just threw this between some <script> tags in the head, or should it go someplace else?
Charles Ingalls over 10 years

That's correct, but you have to make sure to include the jQuery library first. Add this before the code <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.mi‌n.js"></script>
Justin Carroll over 10 years

hey man, don't feel stupid. Feel glad that you are asking questions. This was an easy fix :P. Just wait till it gets to the hard sh!t and you actually need JavaScript (which is easy enough, but comes with its own unique 'gotchas'). Don't forget to add the "green check mark" to the answer that solved your problem.
tomtomthompson over 10 years

aha checked! thought it was silly i couldnt +1 you due to reputation. Cheers again Justin
Saeed Neamati almost 9 years

I still get confused about the height of window, document, html, body and viewport. I can't figure out which one is how much. Is there a good tutorial for this that I can't find via search?
Justin Carroll almost 9 years

Hmm.. I'm not certain what you need to know beyond this post. Can you ask a more specific question? Additionally, if it's beyond the scope of this question I'd suggest searching (or posting) for your answer on StackOverflow. However, I'll preempt a bit and try to answer what I think you might be asking. (Almost) all HTML elements have a width and height of 0 by default. When you start to add content to the element, the width and height (almost) always stretch to fit the contents of the content. When you start to play with CSS rules, you can default width/height to something inherited.
Justin Carroll almost 9 years

Like in this example, because div width/height wasn't what he wanted, and the contents didn't stretch the way he wanted, we defaulted the width/height to some 'parent' in the DOM tree that had known width/height. This is why we set html/body to be 100% width/height (it stretched to fit the viewport). Now all elements that are direct children of body can have their width/height set to 100% because 100% is a known quantity. When you get into multiple inheritance (nested children) the game changes a bit. Again, can you ask a specific question so I can provide a specific answer?
Shad over 4 years

Exactly what I needed in my code. Map flickering stopped when zooming