HomeОбразованиеRelated VideosMore From: LearnWebCode

Full Height and Width "Web App" Style Layout Tutorial

239 ratings | 21526 views
Learn how to position and size elements to utilize the full height and width of the browser window. Check out my "Get a Developer Job" course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Link to view the example shown in the lesson: http://learnwebcode.com/full-height-and-width-web-app-style-layout/ Have you put together a neat page infused with JavaScript awesomeness and want to move it from your computer to online so the world can see your JS chops? I’ve partnered with A Small Orange and can now offer my students 20% savings on any hosting plan. Hint: the shared “Small” plan is one of the best bangs for your buck around! http://p.asmallorange.com/learnwebcode/specialoffer Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Html code for embedding videos on your blog
Text Comments (29)
Jon Reyes (7 months ago)
Excellent tutorial!
narkar (1 year ago)
Now, you could just use this css...height: calc ( 100% - height of header ) ; or just use vw and vh..
narkar (1 year ago)
Even tho it's outdated, someone who learns JS still can learn alot useful things from these videos, because the js code you show is not only useful for the things shown in video, but many others. Thanks for sharing.
LearnWebCode (1 year ago)
For sure, nowadays with flexbox, grid, viewport units, and calc() there are better ways of achieving this layout. Consider this video a history lesson before web browsers were all amazing :)
kuna rakulan (1 year ago)
I like your teahing style
Kadir Yumlu (1 year ago)
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.
narkar (1 year ago)
or just use calc in css. or vh.
Emanuel Eklind (1 year ago)
Nice tutorial, since this was 2014 you can now do these calculations directly in your CSS file :)
Balázs Petróczi (1 year ago)
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; }
King Rayhan (1 year ago)
You are the best teacher fo me. Love you @Brad <3
gilmoretj (2 years ago)
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.
Oleh Savchuk (2 years ago)
Great tutor. Love to learn from you.
solutions channel (2 years ago)
create tutorial
Bhoomika Chauhan (2 years ago)
youre an amazing teacher! thank you
We used to call this the 3 column holy-grail. Was a pain in the ass to deal with, primarily because of IE.
Van Hop Nguyen (3 years ago)
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...!!
Bart Heimenberg (3 years ago)
You are a GREAT teache and inspirator. Thanks a million.
Frank D'oh (3 years ago)
great work!! is there any tutorial wich transforms that web app to native mobile app ? thx :)
nhat do (4 years ago)
Do you have a course for jQuery? 
Rollin Shultz (4 years ago)
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.
AlcatrazLives (4 years ago)
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? 
Magnus Fohlström (3 years ago)
+Honza Bittner   height: calc(100% - 82px) !important; !important isn't needed it was only needed be course of jQuery resize. In web developer Chrome
AlcatrazLives (4 years ago)
+Honza Bittner true but ..... it is cool to look use new things no :)
Honza Bittner (4 years ago)
CSS calc() function is avaible only in version 3. (CSS3) So it is not cool yet - becouse of availability. :(
AlcatrazLives (4 years ago)
+LearnWebCode Which leads you to another video request :) CSS Variables would do a great job with replacing all those "fixed amounts" ..... Thx for giving so much to the community :)
LearnWebCode (4 years ago)
+AlcatrazLives Ah, great point! I can definitely see setting one element to 100% height minus a fixed amount using calc - great idea! I've been conditioned (tortured) to support IE8 the last couple of years so I sometimes forget about the more efficient / modern techniques :)
Devon Wilder (4 years ago)
you have a new fan. great work!!
Andre Paradise (4 years ago)
Good shit bro. I have been watching your stuff for a while. Thx.
love tour tutorials :) keep up the good work ! cheers from Austria.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.