By John BoticaEvery now and then you run into a little scenario where a client wants a layout that would be impossible with just pure CSS. In this specific request it was a fluid height layout, with-out window scrollbars, making the page feel much like an application. The content of the page, and all of its containers fill the window height completely and when the window is resized the content scales.
This is not achievable with pure CSS due to the nature of height percentages, but with some JavaScript (we are using the jQuery library) and a little creative thinking we were able to achieve the client’s request. When the window is resized, the calculations are run in JavaScript and updated on the fluid elements. JavaScript might not always be the appropriate solution, but in this instance it was, being that the client’s site requires JavaScript to be enabled for most of its functionality anyways, so it fits the bill.
Take a look at the example here. Try resizing your window to see what happens.
Cheers!
Related Articles
- 45 Fresh Useful JavaScript and jQuery Techniques and Tools (smashingmagazine.com)
- 50 Coding Techniques For Layouts, Visual Effects and Forms (CSS/jQuery) (smashingmagazine.com)
- 45 Powerful CSS/JavaScript-Techniques (smashingmagazine.com)
- 35 Fresh JavaScript/jQuery Tools and Resources (noupe.com)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=a7f445b4-246b-4a04-9d99-eeec09b287c5)
Comments 3
What you’ve got here my friend, is a truly awesome approach that saves you from using tables! Well done! I must admit that the whole thing seems like it should be easily accomplished using CSS, but then the height inheritance of 100% comes into play and screws things up.
It’s awesome that your code example is so portable as well, thanks for sharing.
[...] Fluid Height Layouts Using JavaScript and CSS [...]
Thank you so much for this! I have been looking everywhere to find css/scripts for fluid height layout as I have a client with the same request. I enjoyed the example, but I would LOVE to see the actual website where this was implemented (always good to see the work in action). Thanks again for sharing!
Leave a Comment