Question

I have horizontal layout and it has 5 inline divs. Is there a way in javascript to get the width of the users’ viewport then apply it to the each content panel tags width, so it will be 100% in every content panel? I need it to be 100% of the viewport because there are parallax elements inside it

I have tried this css code below but the panels are just stacking on top of each other.

#contentPanel { width: 100%; float: left;}

I really don’t know if the questions makes any sense, because I’ve been up for 16 hours searching and trying to work this out.

Answer 1

It’s easy with JQuery:

var fullDiv = $("div");

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

$("body, html").width(3*viewportWidth);
fullDiv.width(viewportWidth);
fullDiv.height(viewportHeight);

Simple Demo.

You will want to update the divs when the browser is resized probably, currently it only works when it first loads. Read more about .resize().