The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design What should be height units in Responsive design

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #152275

    I am trying to develop responsive web Application, Which is resolution independent.
    I want to know which units I can used for height of div.
    Currently I am using percentage(%) units for width and height, but it does not work all time , example: in case of float div and relative position div.
    But when I use pixel unit for height and percentage (%) for width it works fine.
    Is this correct method ??


    Hello Jaycrisp,

    I have header which is fixed to top.

    If I put height 10% to header div then it squeezed in landscape orientation, that height look different in landscape and portrait mode.

    Could you refer following Html code to getting this:

    <!DOCTYPE html>
      <head><title>height px or percentage</title>
      <style type="text/css">
      html, body 
      {width: 100%;
      margin: 0px;
      padding: 0px;
      -webkit-text-size-adjust: none;
    <div class="header">

    I’d try to avoid assigning a height attribute as it should generally be defined by the content.

    This…using height in percentages just isn’t part of responsiveness.


    I have made codepen for my code

    find the below mention link:

    height in % for header div:

    height in % ….. please click for example

    height in pixel for header div:

    height in pixel ….. please click for example

    could you tell me which is ideal code so i can use same for future development

    could you check this both link in Responsive design view.


    could you tell me which is ideal code so i can use same for future development

    There isn’t anything like “ideal code”, since web standards are evolving all the time. What works today, in a month may be obsolete.

    Using either percentages or pixels for achieving responsiveness won’t cut it. On my screen, your header with percents was a lot bigged (twice or more) that the one with pixels.

    If you want to go with pixel-perfect design (which is often the request from a lot of customers out there), go with media queries. You can do pixel-perfect “large” version and adaptive, height: auto-version for mobile devices.


    I’ve made small change in your codepen.

    In styles I have globally define padding and margin “0”

    Now What would be top and bottom padding for text ….. is it pixel or percentage??

    please see below mention codepen


    % based margins and padding are relative to the width in CSS. So if your element is responsive the bigger it is the bigger margins you’ll have. Is this what you want? If not.

    Use em units.

    So if your base font-size is 16px. Padding of 1em would equal to 16px.


    It would depend on what you are trying to achieve with the design, so there isn’t really a “correct” answer to that question.

    Me, I like to make sure the vertical margins/padding is consistent throughout. The easiest way to do that would be with pixels, however this won’t scale with increases in font-size.

    Ems will do that, but it can get complicated as an em is proportional to the font size of that element, so you end up with all sorts of wierd numbers.

    On the project I’m currently working on, I’m using rems, with a pixel based fallback (using a SASS mixin), so that browsers that don’t support it will still work ok.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘Design’ is closed to new topics and replies.