Responsive Heights

February 17, 2015

Responsive webdesign is very much centered on how to manage the widths of our elements, but what about the heights? Heights are usually tied to the lenght of the content, and are rarely a problem to address, but in some cases (especially on mobile) sometimes you need some elements to always be visibile on the screen, and some others (usually content boxes) to scroll, as you want all the content to appear on the window without having to scroll down the whole page to reveal more.

Let’s imagine a scenario like the one in this picture:

responsive heights

We have our app, or website, with three main elements:

  • A logo on top
  • Some content (stroked in red)
  • An advertisement banner

Let’s say both the banner and the logo on our screen has to be fixed positioned, so they’ll always have to be visible, and the content  in our red-stroked box must scroll, as we don’t know how much content we will place in that box.

The first thing I’d think of doing is using position:fixed for the logo and the banner, giving some top and bottom padding or margin to the body so that the content would scroll and won’t overlap on the fixed elements. But let’s say Fixed Positioning was not an option, how would you manage the height of the #content div?

We could use percentage heights for the containers of my elements, maybe something like


#logo,
#banner {height:15%}
#content {height:70%}

but what happens when you have a device with a larger screen? The logo and the banner would adapt to the larger screen size and may exceed the 15% height and the layout would then break. When working on very complex projects, you may also not have complete control over the html and you may end up in a situation where your element is deeply nested inside a dynamically generated html structure. Giving #logo a percentage height would be uneffective in this scenario:

<div class="something">
  <div class="something-else">
    <div class="something-elser">
      <div id="logo"></div>
    </div>
  </div>
</div>

The question still remains: what height should we give to the #content element? And how? Using calc() or flex for the job would be wonderful, but the support is still sketchy. My last thought was inevitably giving the element a px height with jQuery.

See the Pen dynamic height of a div based on other divs and window.innerHeight by Valerio (@vlrprbttst) on CodePen.

This simple function gives a div a dynamic height based on the heights of other divs and in relation to the window inner height:

(function () {
    var heights = window.innerHeight;
    var outerHeights = $("#logo").outerHeight(true) + $("#banner").outerHeight(true);
    $('#content').css('height', (heights - outerHeights) + "px");
})();

What this function does is calculating the height of the window and the height of the elements that needs to be always visible (including their paddings, margins, borders etc.) and then it does a subtraction between the window.innerHeight and those two other elements (#logo and #banner in our case) and gives a px height to our scrollable area (#content). Add a $(window).resize function to your code and you are covered even when the user stretches or shrinks the browser window, or if he flips the device to a different orientation.

I used this very function to manage the height of the navigation of my website for example, to avoid the following:

responsive-heights2

Be aware that, if the result of the function returns a negative number, the layout will break. This little function turned out to be very useful in many scenarios I’ve encountered but if you would have managed this problem in other ways, please write it in the comments, I’d be glad to read about other point of views and options.

Share this:

Back

Guest Posts

Recent Posts