W3C home > Mailing lists > Public > www-style@w3.org > July 2009

Re: vw/vh/vm units

From: Aryeh Gregor <Simetrical+w3c@gmail.com>
Date: Fri, 10 Jul 2009 17:59:13 -0400
Message-ID: <7c2a12e20907101459g6e5b7a9exda14225fcd935049@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: www-style@w3.org
On Fri, Jul 10, 2009 at 3:51 PM, Tab Atkins Jr.<jackalmage@gmail.com> wrote:
> <!DOCTYPE html>
> <html><head>
> <title>Test</title>
> <style>
> body {
>        margin: 0;
>        padding: 0;
>        background: white;
> }
> #test {
>        background: blue;
>        padding-top: 135.5%;
> }
> </style>
> </head><body>
> <div id="test"></div>
> </body></html>

You don't the <html><head>, </head><body>, </body></html> here, BTW.
HTML 5 is great for brevity.  :)  Actually, this works just as well:

<!DOCTYPE html>
html {
    background: white;
body {
    margin: 0;
    padding-top: 100%;
    background: blue;

> Change your viewport so that it is the screen height but as skinny as
> possible, then play with the percentage until the screen is completely
> blue but there's no vertical overflow yet.  If you then increase the
> padding-top by a *tiny* bit (half a percent or so), you'll trigger
> vertical overflow.  The scrollbar appears, reducing the width of the
> viewport, and thus the height of the block as well.  Because the
> viewport is very tall and skinny, the height change is greatly
> magnified.  In Firefox 3.5 you should see both horiz and vert
> scrollbars, both inactive, plus a visible white stripe at the bottom.


> This means that, at least in this situation, Firefox resolves the
> circular dependency by just keeping the scrollbars but making them
> inactive (since the content on the page no longer overflows).

That's clever, and quite sane.

> Testing in Safari 4.0 (530.17) shows some slightly different behavior
> - at the critical point Safari leaves a white gap on the right where
> the scrollbar would be if there were any overflow.

That sounds kind of buggy, but at least it doesn't go into an infinite loop.

> IE seems to display a vertical scrollbar at all times, so it's not
> subject to this problem.

It should be possible to trigger it somehow using a horizontal scrollbar . . .

Anyway, I've gone ahead and filed a bug with WebKit, as requested by
David Hyatt in #webkit:


(I'm not sure if Mozilla would want me to file a bug there -- I don't
know if they want a new bug for every unimplemented CSS feature,
unless someone is going to actually work on it . . .)
Received on Friday, 10 July 2009 21:59:50 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:27 UTC