CSS grid/layout framework with focus on fixed elements and single page full screen layouts

Question

Rule of thumb - if you\'re messing with CSS too much in your layouts, switch to a framework. I\'ve been going over the dozens of grid/layout frameworks out there and most of the

Answer 1

You can do this with straight, minimal CSS and be completely flexible (user changes font sizes or your content is of unknown length? no problem).

http://codepen.io/cimmanon/pen/vusmz

Assuming this markup:

Header


  

    
Menu (fixed)
    
long list
  
  

    
...
  

The CSS:

body, html {
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
@supports (flex-wrap: wrap) {
  body {
    display: flex;
  }
}

.container {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
@supports (flex-wrap: wrap) {
  .container {
    display: flex;
  }
}

.sidebar {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 1 100%;
  -ms-flex: 1 100%;
  flex: 1 100%;
}
@supports (flex-wrap: wrap) {
  .sidebar {
    display: flex;
  }
}

header {
  background: yellow;
  height: 3em; /* optional */
}

aside {
  background: green;
  height: 4em; /* optional */
}

nav {
  background: orange;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow-y: scroll;
  height: 1px;
}

main {
  background: grey;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow-y: scroll;
  height: 1px;
}

Browser support is limited due to the requirement for flex-wrap: wrap support (IE10 is the only browser with "partial support" that supports it: http://caniuse.com/#feat=flexbox). Current browser support is limited to Chrome, Opera, IE10 and Blackberry 10.

Be aware that the scrolling elements have an extremely small height, which can cause issues for browsers that lack full Flexbox support (see: Flexbox and vertical scroll in a full-height app using NEWER flexbox api for more information).