RelativeLengths

test CSS relative lengths
Test

Viewport relative lengths (viewport units)

vh
vw
vmin
vmax

%cframe width=7rem bgcolor=lightblue border='3px solid red' padding=2rem% http://pmichaud.com/img/misc/gem.jpg

%width=50vw% http://pmichaud.com/img/misc/bubble.jpg %%

%height=50vh% http://pmichaud.com/img/misc/bubble.jpg %%

Note that for historical reasons inline wikistyles for images and tables don't insert css-styles but html-attributes height, width and align. Browsers expect the height and width attributes to contain numbers and interpret them as pixels. So above, the first picture is 50 pixels wide, the second 50 pixels high; below the table is 40 pixels wide. This may be something we can update. UpdateMe --Petko June 29, 2015, at 02:32 PM

||width=40vmax border=1
|| 40 * 1/100th of the largest side||


|| style="width:40vmax;" border=1
|| 40 * 1/100th of the largest side||

40 * 1/100th of the largest side

(:div class="tabtable" style="width:50vmin; border:0.25rem dotted blue":)
div content
(:divend:)

div content

0: 00.00 00.00 EnablePost = 1, keys= 1: 00.00 00.00 config start 2: 00.01 00.01 config end 3: 00.03 00.03 MarkupToHTML begin 4: 00.03 00.03 MarkupToHTML begin 5: 00.04 00.03 ReadApprovedUrls SiteAdmin.ApprovedUrls begin 6: 00.04 00.04 ReadApprovedUrls SiteAdmin.ApprovedUrls end 7: 00.04 00.04 MarkupToHTML end 8: 00.04 00.04 MarkupToHTML begin 9: 00.04 00.04 MarkupToHTML end 10: 00.05 00.04 MarkupToHTML begin 11: 00.05 00.04 MarkupToHTML end 12: 00.05 00.04 MarkupToHTML begin 13: 00.05 00.04 MarkupToHTML end 14: 00.05 00.04 MarkupToHTML begin 15: 00.05 00.04 MarkupToHTML end 16: 00.15 00.13 MarkupToHTML end 17: 00.16 00.14 MarkupToHTML begin 18: 00.17 00.15 MarkupToHTML end 19: 00.17 00.15 MarkupToHTML begin 20: 00.17 00.15 MarkupToHTML end 21: 00.18 00.16 now