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>
<style>
body { margin: 0; overflow-y: scroll; background: red; }
#container {
   background: lime;
   min-height: 100vh;
   margin-bottom: -3em;
}
#footer {
   background: blue;
   height: 3em;
}

</style>
<div id="container">
   <div id="content">
     <button type="button" 
onclick="document.getElementById('content').style.height='4000px';">expand 
content</button>
     <button type="button" 
onclick="document.getElementById('content').style.height='auto';">collapse 
content</button>
<div>Chrome has a bug when increasing the height of the veiwport.</div>
   </div>
</div>
<div id="footer"></div>



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Thursday, 6 December 2012 07:43:08 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:03 GMT