Skip to content

Instantly share code, notes, and snippets.

Embed
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 http://dev.w3.org/csswg/css3-values/#calc0 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>
<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="https://bugs.webkit.org/show_bug.cgi?id=27160">WebKit</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=503720">Firefox</a></p>
{"version":"1.1","settings":{"prefixfree":"1"},"view":[{"template":"r\nc\n","active":false,"seethrough":false},{"template":"r\nh","active":false,"seethrough":false},{"template":"r\nch","active":false,"seethrough":false},{"template":"r","active":true,"seethrough":false}]}
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.