0

I'm trying to design a fluid / responsive web design using bootstrap. I'm trying to design the layout so that it'll fit in many devices. My question about setting height to a layout element, such as the header or footer. I've got it in pixels right now, but I would like to know if I should be using some other form of measurement.

I'm probably over-thinking this, but I'd like to make sure I'm doing this the right way. Thanks in advance!

user2301187
  • 157
  • 1
  • 7
  • possible duplicate of [Setting element height in responsive layout](http://stackoverflow.com/questions/9432029/setting-element-height-in-responsive-layout) –  May 24 '13 at 06:15

3 Answers3

1

Avoid setting a height whenever possible. You can often get around - and preferably so - using padding on the element in question, and/or margin values on the element's children.

If you absolutely need to define a height, use min-height so that it'll grow as its children take up more vertical space.

Many times people fall back to defining static height values because the elements are also using float and add height to get content flow and backgrounds back. This is rather poor practice and if this is the case you should consider looking into methods of clearing floats.

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
Nils Kaspersson
  • 8,816
  • 3
  • 29
  • 30
  • Perfect answer. To get around, I'd add to `padding`, `margin`: `line-height` and (rarely used) along `display: table: cell` also `border-spacing`. – FelipeAls May 25 '13 at 07:04
0

Probably pixels are the best option if you have a lot different devices. Other measurements to consider:

  • em (1em equals default font size)
  • % (of the screen)
Alexandru R
  • 8,560
  • 16
  • 64
  • 98
0

em and % is the good solution for fluid / responsive web design.

I will suggest for media query css

    @media only screen and (max-device-width: 480px) {

    }
user1292594
  • 29
  • 8