CSS Dimension Best Practices - Elements Height/Width (pixels or %)

My question is about the best way to set elements sizes, should i set it in % or in px?

I'm do开发者_StackOverflow中文版ing a web app in my job, and i'm setting every height/width in percentage. Is this the best approach?

By best i mean correctly displaying on a variety of monitors sizes and resolution, and cross-browser.

Sample code:

html
{
    height:100%;
}

body
{
    height:100%;
}

div.title
{
    background-color:Gray;
    padding:0;
    margin:0;
    float:left;
    width:100%;
}

form#ct101
{
    height:100%;
}

And it goes on all the way down.

Thank you

It really depends on what you're trying to do. For example, for a content tag, I usually like using 80-95%. If I'm making a login screen, I would use 30-40% or a fixed width depending on how the rest of the page looks.

I know this question is old, but unanswered came up in an unrelated google search...

I would leave the height at 100% that is fine as long as the form is the only thing on the screen.. that will really be independent of your app. The width, on the other hand...

Using @media you can design your forms for mobile and for people on the desktop.

example:

@media screen and (max-width: 645px) {
form#ct101 {
width: 100%; 
} }
@media screen and (min-width: 646px) {
form#ct101 {
width: 600px; 
} }

That would make your forms fill up the screen on mobile devices so they have the max space to see them, and then keep them not so large on monitors so the form inputs aren't long. In theory the longer the form fields, the longer it is thought to fill out, and will experience fall off/bouncing from the form.