Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Using calc(), rem & vw for scalable rem-based layout
/* Using calc(), rem & vw for scalable rem-based layout */
/* ref example 13 */
/* waiting for vw support */
body {margin: 0; text-align: center;}
.wrapper {
width: 40rem;
margin: 2em auto;
border-bottom: 2px solid #ccc;
.content {
float: left;
width: 29rem;
padding: 1em;
background-color: #cde;
.sidebar {
float: left;
width: 10rem;
margin-left: 1em;
border-left: 2px solid #999;
padding: 1em;
background-color: #def;
:root {font-size: calc(100vw / 40);}
.content, .sidebar {box-sizing: border-box; margin-top: 2px;}
.ruler {
clear: left;
width: 640px;
margin: 0 auto;
border-top: 2px solid #555;
<div class="wrapper rem">
<div>40rem wide</div>
<div class="content">content div</div>
<div class="sidebar">sidebar</div>
<div class="ruler">640px wide</div>
<p>40rem should scale to fill viewport based on <code>:root {font-size: calc(100vw / 40);}</code><br>
sadly vw hasn’t been implemented yet. bugs: <a href="">WebKit</a>, <a href="">Firefox</a></p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.