CODEWITHSUNDEEP
javascripthtmlheight
tomtomthompson
tomtomthompson

Reputation: 23

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.

Upvotes: 2

Views: 11984

Answers (5)

Jason
Jason

Reputation: 103

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

Upvotes: 5

J Carroll
J Carroll

Reputation: 1391

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
}

Upvotes: 9

ced-b
ced-b

Reputation: 4065

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/

Upvotes: 0

Bala
Bala

Reputation: 510

try this

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

}

Upvotes: 0

Charles Ingalls
Charles Ingalls

Reputation: 4561

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();
  });

});

Upvotes: 0

Related Questions