vh-calc-support.html (897B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title> 6 CSS Values and Units Test: 7 Viewport units are supported inside calc expressions. 8 </title> 9 <meta name="assert" content=" 10 Check that viewport units add correctly to pixels in calc() expressions 11 " /> 12 13 14 <link 15 rel="author" 16 title="François REMY" 17 href="mailto:fremycompany.developer@yahoo.fr" 18 /> 19 20 <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> 21 <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> 22 23 <link 24 rel="match" 25 href="reference/all-green.html" 26 /> 27 28 <style type="text/css"> 29 30 html, body { margin: 0px; padding: 0px; } 31 32 html { background: red; } 33 #target { position: absolute; background: green; width: calc(100vw + 50px); height: calc(100vh + 50px); top: -50px; left: -50px; } 34 35 </style> 36 37 </head> 38 <body> 39 40 <div id="target"></div> 41 42 </body> 43 </html>