- From: Alan Gresley <alan@css-class.com>
- Date: Thu, 06 Dec 2012 18:23:09 +1100
- 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 UTC