CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
user2301187
user2301187

Reputation: 157

height in a fluid layout

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!

Upvotes: 0

Views: 180

Answers (3)

Nils Kaspersson
Nils Kaspersson

Reputation: 9464

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.

Upvotes: 1

user1292594
user1292594

Reputation: 29

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) {

    }

Upvotes: 0

Alexandru R
Alexandru R

Reputation: 8833

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)

Upvotes: 0

Related Questions