//- Using the holy grail demo from http://bitsofco.de/holy-grail-layout-css-grid/ and just using calc & vw to create the layout instead of using the CSS Grid Layout
.container
  header The "Holy Grail" Layout
  main
    aside.sidebar-content This is some content in the left sidebar
    .center-content
      p And this is some bacon related filler...
      p Bacon ipsum dolor amet shoulder leberkas boudin jowl strip steak, picanha pastrami ham flank cupim shank tongue short loin.  Frankfurter beef ribs tongue brisket.  Beef ribs pork belly venison, short loin alcatra meatball prosciutto pancetta kevin bacon cupim pork frankfurter.  Spare ribs ham bresaola boudin, jowl tenderloin andouille short ribs ball tip chuck.
      p Boudin short loin sirloin, bacon alcatra shank andouille frankfurter venison hamburger chicken filet mignon rump picanha.  Swine pastrami ball tip turducken, corned beef biltong jerky kielbasa frankfurter chuck filet mignon bresaola doner bacon.  Andouille shank pork loin, sirloin chicken cow meatball bresaola cupim tail kielbasa tongue pancetta.  Andouille biltong meatball pancetta capicola tongue.  Ball tip ham jowl capicola venison.
      p Boudin short loin sirloin, bacon alcatra shank andouille frankfurter venison hamburger chicken filet mignon rump picanha.  Swine pastrami ball tip turducken, corned beef biltong jerky kielbasa frankfurter chuck filet mignon bresaola doner bacon.  Andouille shank pork loin, sirloin chicken cow meatball bresaola cupim tail kielbasa tongue pancetta.  Andouille biltong meatball pancetta capicola tongue.  Ball tip ham jowl capicola venison.  

    aside.sidebar-content This is some content in the right sidebar
  footer Footer -
    span(class="link")  Original by
      a(href="http://bitsofco.de/holy-grail-layout-css-grid/", target="_blank") bitsofco.de
View Compiled
@import 'bourbon';

// Colours
$grey: #646464;
$white: #FFFFFF;
$yellow: #FFD60F;
$lightGrey: #F2F2F2;
$lightPurple: #A7A7EA;

// Dimensions
$breakpoint: 660px;
$headerHeight: 61px;
$footerHeight: 48px;
$sidebarWidth: 200; // px is added later as this is also used for multiplication

html, body {
  margin:0;
  padding:0;
  height:100%;
  background-color: $lightGrey;
}

// Main Wrappers
.container {
   min-height:100%;
   position:relative;
}

main {
  @include clearfix;
  padding-bottom: 48px;
}

// Layout elements
.sidebar-content {
  width: #{$sidebarWidth}px;
}

.center-content {
  background-color: $white;  
  @include calc(width, "100vw - #{($sidebarWidth * 2) + 17}px");
}

.sidebar-content, .center-content {
  float: left;
  padding: 15px;
  @include calc(min-height, "100vh - #{$headerHeight + $footerHeight}");
}

// Styling elements
header {
  font-size: 18px;
  padding: 20px 10px;
  text-align: center;
  font-weight: bolder;
  background-color: $yellow;
}

footer {
  bottom: 0;
  width: 100%;
  height: 48px;
  color: #fff;
  position: absolute;
  padding: 15px 10px;
  text-align: center;
  font-weight: lighter;
  background-color: $grey;
}

// Media queries
@media (max-width: $breakpoint) {
  .center-content, .sidebar-content {
    width: 100%;
    min-height: initial;
  }
}

// General
*, :before, :after {
  box-sizing: border-box;
}

p:first-child {
  margin: 0;
}

.link {
  font-size: 14px;
  a {
    color: $lightPurple;
    padding-left: 5px;
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.