Full Height and Width 'Web App' Style Layout Tutorial

Learn how to position and size elements to utilize the full height and width of the browser window.

Link to view the example shown in the lesson:

Follow LearnWebCode on Twitter for resources and updates:

[vanhopnguyen]

This guy is so wonderful. I love him so much. Everything he say, so easy to get it. Thanks u a lot. HOpe u got heathy, and best things for u...!!

[djpunisha]

love tour tutorials :) keep up the good work ! cheers from Austria.

[andreparadise]

Good shit bro. I have been watching your stuff for a while. Thx.

[returnZeroo]

You are the best teacher fo me. Love you @Brad <3

[petroczibalazs]

You can do all these without any javascript as long as you can calculate with fixed height and width values by stretching and indenting the absolutely positioned flexible main-content element and aligning and offsetting the fix-size sidebars!

#mainContent{
position: absolute;
/*stretching*/
top: 0;
bottom: 0;
left: 0;
right: 0;
/*indenting*/
margin-top: "HEIGHT-OF-THE-HEADER" px;
margin-right: "WIDTH-OF-THE-RIGHT-BAR"px;
margin-bottom: auto;
margin-left: "WIDTH-OF-THE-LEFT-BAR"px;
}

#leftSideBar{
position: absolute;
width: 300px;
/*horizontal positioning*/
left:0;
right: auto;
/*vertical stretching*/
top:0;
bottom:0;
/*vertically indenting*/
margin-top:"HEIGHT OF THE HEADER + HEIGHT OF NAVIGATION"px;
margin-bottom: "HEIGHT-OF-BUTTONS-BAR"px;
margin-left:0;
margin-right: auto;
}

[AntonyAllocious]

Thank you very much, In case if i need drop down menu option means, how i need to control the sidebar height. Please try to advice me

[RollinShultz]

The tutorial is useful and well done, but Even though I was able to ascertain the .elements you used for Jquery parameters were classes, some might miss that. I also would like to have seen you explain the Jquery function, what it returns if anything and what parameters are acceptable. I will search for it, but next time maybe explain it in more detail.
Keep up the good work.

[gilmoretj]

Using the window.resize and JavaScript/jQuery represents a performance hit. The event may not be called very often but some (older) browsers fire the event even when performing a screen reflow/repaint. An alternative approach is to use CSS to set the top (offset from the top) and bottom (clamped to zero) values of the main and side panels.

[kadiryumlu]

You don't need to calculate height value in javascript. You need to set html and body tags' heights to 100% and then set absolute divs' bottom property to 0 in css. I always do it like that.

[AlcatrazLives]

First of all RESPECT! You're a fantastic tutor!  Secondly out of curiousity ... can you use calc() within CSS instead of using the Jquery Part for deriving height? 

[VKMilling]

We used to call this the 3 column holy-grail. Was a pain in the ass to deal with, primarily because of IE.

[Arttyor]

Now, you could just use this css...height: calc ( 100% - height of header ) ; or just use vw and vh..

[SageHeru]

SUBSCRIBING FROM THIS ONE VIDEO, THANK YOU

[shrutideka]

It is 6 years old tutorial..

But since the video gets views
And people doesn't notice

Interesting