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 18:23:09 +1100
Message-ID: <50C047DD.60905@css-class.com>
To: Boris Zbarsky <bzbarsky@MIT.EDU>
CC: Sylvain Galineau <sylvaing@microsoft.com>, James Robinson <jamesr@google.com>, "www-style@w3.org" <www-style@w3.org>
On 5/12/2012 4:45 AM, Boris Zbarsky wrote:

> I do think it's a bit weird that if I have a position:fixed element with
> no border/padding/margin, then setting "width: 20vh; right: 0" and
> "width: 20vh; left: 80vh" don't have the same behavior when there's a
> vertical scrollbar.  But this keeps coming back to what the use cases
> for vh/vw are.
> -Boris

For 'vh' at least. Working in IE9 correctly. Authors will use it as a 
way to achieve a sticky footer.

<!DOCTYPE html>
body { margin: 0; overflow-y: scroll; background: red; }
#container {
   background: lime;
   min-height: 100vh;
   margin-bottom: -3em;
#footer {
   background: blue;
   height: 3em;

<div id="container">
   <div id="content">
     <button type="button" 
     <button type="button" 
<div>Chrome has a bug when increasing the height of the veiwport.</div>
<div id="footer"></div>

Alan Gresley
Received on Thursday, 6 December 2012 07:43:08 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:24 UTC