Full Height and Width “Web App” Style Layout Tutorial

[ad_1]
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:

Link to view the example shown in the lesson:

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!

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:


Posted

in

by

Tags:

Comments

19 responses to “Full Height and Width “Web App” Style Layout Tutorial”

  1. kuna rakulan Avatar

    I like your teahing style

  2. Kadir Yumlu Avatar

    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.

  3. Emanuel Eklind Avatar

    Nice tutorial, since this was 2014 you can now do these calculations directly in your CSS file 🙂

  4. Balázs Petróczi Avatar

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

  5. King Rayhan Avatar

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

  6. gilmoretj Avatar

    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.

  7. Олег Савчук Avatar

    Great tutor. Love to learn from you.

  8. Bhoomika Chauhan Avatar

    youre an amazing teacher! thank you

  9. Vikingblooded Kraftwerks Avatar

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

  10. Van Hop Nguyen Avatar

    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…!!

  11. Bart Heimenberg Avatar

    You are a GREAT teache and inspirator. Thanks a million.

  12. Frank D'oh Avatar

    great work!!
    is there any tutorial wich transforms that web app to native mobile app ? thx 🙂

  13. nhat do Avatar

    Do you have a course for jQuery? 

  14. Rollin Shultz Avatar

    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.

  15. AlcatrazLives Avatar

    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? 

  16. Darius Wilder Avatar

    you have a new fan. great work!!

  17. Andre Paradise Avatar

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

  18. NenadSSS Avatar

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

Leave a Reply

Your email address will not be published. Required fields are marked *