2

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
  • 23
  • 1
  • 1
  • 5

5 Answers5

8

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
}
Justin Carroll
  • 1,362
  • 1
  • 13
  • 37
  • that doesnt seem to work either, heres what i have got http://jsfiddle.net/vsSSZ/ – tomtomthompson Oct 05 '13 at 04:26
  • here http://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. – Justin Carroll Oct 05 '13 at 04:34
  • 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. – Justin Carroll Oct 05 '13 at 04:41
  • 1
    aha checked! thought it was silly i couldnt +1 you due to reputation. Cheers again Justin – tomtomthompson Oct 05 '13 at 04:49
  • 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? – Saeed Neamati Jun 11 '15 at 07:43
  • 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 Jun 12 '15 at 14:16
  • 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? – Justin Carroll Jun 12 '15 at 14:18
5

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

Jason
  • 103
  • 1
  • 8
0

Here is a script free solution, just CSS. This assumes that the divs are directly in the body element or a parent with position absolute and the parent has no padding.

#section-1 {
   position: absolute;
   height: 100%;
   width: 100%;
   background: #ff0000;
}

#section-2 {
   position: absolute;
   width: 100%;
   top: 100%;
   height: 100%;
   background: #00ff00;
}

#section-3 {
   position: absolute;
   width: 100%;
   top: 200%;
   height: 100%;
   background: #0000ff;
}

See fiddle: http://jsfiddle.net/QtvU5/1/

ced-b
  • 3,957
  • 1
  • 27
  • 39
  • 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 Oct 05 '13 at 04:18
  • @tomtomthompson ah... that works almost the same. See edited css and fiddle. – ced-b Oct 05 '13 at 04:29
0

A bit of jQuery should do it:

$(document).ready(function() {
   var window_height = $(window).height();
   $('#section-1").height(window_height);
});

And if you want to keep 100% height on window resize:

$(document).ready(function() {

   function viewport_height() {
      var window_height = $(window).height();
      $('#section-1").height(window_height);
   }

   viewport_height();

   $(window).resize(function() {
      viewport_height();
  });

});
Charles Ingalls
  • 4,521
  • 5
  • 25
  • 33
  • 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 – tomtomthompson Oct 05 '13 at 04:35
  • That's correct, but you have to make sure to include the jQuery library first. Add this before the code – Charles Ingalls Oct 05 '13 at 04:41
0

try this

window.onload = init;
function init()
{
var viewportHeight = "height:" + document.documentElement.clientHeight+"px;"; 
document.getElementById('section-1').setAttribute('style', viewportHeight);

}
Bala
  • 510
  • 2
  • 9