W3C home > Mailing lists > Public > www-style@w3.org > December 2012

Re: [css3-values] Interaction of vw/vh and scrollbars

From: Alan Gresley <alan@css-class.com>
Date: Thu, 06 Dec 2012 17:39:45 +1100
Message-ID: <50C03DB1.2060206@css-class.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: www-style list <www-style@w3.org>
On 4/12/2012 10:02 AM, Tab Atkins Jr. wrote:
> Right now the V&U spec doesn't mention anything special about whether
> the presence of scrollbars affects the size of the vw/vh units.
> Here's a testcase:
> <!DOCTYPE html>
> <div></div>
> <style>
> body { margin: 0; overflow: scroll; }
> div {
>    background: url('http://xanthir.com/pony') no-repeat right top silver;
>    width: 100vw; height: 100vh;}
> </style>
> (Alter the overflow value to get different results.)
> In the two browsers that currently support vw/vh, Chrome and IE,
> neither one pays any attention to scrollbars.  Regardless of the value
> of overflow on <body>, they set the two values to the width/height of
> the scrollbar-less viewport.

For the below screenshot, on the left is the original overflow: scroll. 
On the right is overflow: hidden.


Chrome is showing a bug that reminds me of an Opera bug with min-height 
(see below) and an old IE7 bug. Below is some code that will trigger the 
Opera bug.

<!DOCTYPE html>
html { height: 100% }
body { height: 100%; background: red; overflow: hidden; margin: 0; }
div {
   background: lime; min-height: 100%;


Alan Gresley
Received on Thursday, 6 December 2012 06:46:59 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:22 UTC