Using em as measurment unit for width and height for elastic design

Issue

I am trying to understand if (and how) you can use the em measurement for CSS properties that set the width and height of elements for an elastic design layout (width, height, min-width, min-height, max-width and max-height). The problem relates to the layout position of the main wrapper. I don’t understand when, and how you should use the em measurement for width and height properties when designing my layout (not for sizing). If I, for example, want the width of the main wrapper to be 90 % of the body-element, how can I achieve that using em instead of %?

I have searched Stack Overflow for similar questions, but the answers include things like responsive design, JavaScript and JQuery. I can only use HTML5 and CSS3. I have also tried to set the width and height using different values for em, but then main wrapper does not stay centered or exceeds the screen size.

Here is a code snippet of what I have tried. The full code is available on JSFiddle

<div id="page">
    <header>
        <nav></nav>
    </header>
    <div id="content">
        <article></article>
        <article></article>
    </div>
    <aside></aside>
    <footer></footer>
</div>


#page {
    position: relative;
    width: 90em;
    height: 90em;
    top: 1em;
    right: 1em;
    bottom: 1em;
    left: 1em;
}

The code above makes the main wrapper exceed the screen size, both vertically and horizontally. I want the results to equal that of using 90 % instead of 90em for width and height.

Solution

em measurements are based on font-size

What you will need to use is either % or vw (viewport units)

I would recommend using % as vw/vh can have some strange bugs on mobile safari:

100% is not always the same as 100vh when there is an address bar showing.

• 100% will shrink the content to fit when an address bar shows
• 100vh won’t so your content might appear under the address bar

Answered By – Martin

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0