Chrome liquid layout issue

Question

I have a div with this class:

 .header {
    width: 100%;
    height: 10%;
}

If you inspect this with a web developer tool, you can see how browser calculate the width and height of an element:

IE 9 --> 854.24 x 26.05

Firefox 15.01 --> 854 x 28

Safari 5.1.7 --> 843 x 27

Chrome 22.0.1229.94 m --> 951 x 36

Now, as you can read above, Chrome calculate the % in a different way. How I can solve this? Is this a bug? Safari use webkit as well but doesn't have that issue.

Answer 1

What you are seeing is a calculation based on the size of the viewport, html and body tags. If the viewport, the area you see in your window, changes, so goes the size of html->body->div. Just adding another toolbar will change those sizes.

This is one of the purposes of "responsive web design" where the content determines the size of the element and we should no longer base layout on the number of pixels on a device. But that would really be getting in-depth and off-topic.