Fixed header and sidebar but scrollable content and header area

Question

I am trying to create a horizontal scroll for the main content area. I have a header, sidebar and a div (wrapperContent). Basically the header and div (wrapperContent) should be scrollable horizontally like TeamWeek. The sidebar is fixed and will only scroll vertically

On the class of my div wrapperContent i placed an overflow auto, which should enable me to scroll.

Basically the yellow en red background should extant all the way and should be the only scrollable ones

Working with angular

Here is my codepen example -> http://codepen.io/GY22/pen/PqeoZv

hmtl code:

<!-- START HEADER -->
<header>
  <div><h1>Timeline</h1></div>
</header>
<!-- END HEADER  -->

<!-- START SIDEBAR -->
<div id="sidebar" ng-app="DragDrop" ng-controller="AppCtrl">
  <ul>
    <li ng-repeat="user in users" class="circular">
      <p class="initials">{{user.initials}}</p>
    </li>
  </ul>
</div>
<!-- END SIDEBAR -->

<!-- START CONTENT -->
<div class="wrapperContent">

</div>
<!-- END CONTENT -->

css code:

header{
  width: 100%;
  height:90px;
  background-color: yellow ;
}

#sidebar {
  position: fixed;
  width: 120px;
  height: 100%;
  background-color: #03A9F4;
  z-index: 33;
  margin-top: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-bottom: 100px
}

#userList {
  padding-bottom: 10px !important;
}

ul li {
  margin-left: -22px;
  list-style-type: none;
}

.circle {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  background-color: hotpink;
}

.initials {
  margin-left: 25px;
  padding-top: 30px;
  font-weight: bold;
  font-size: 18px;
}

.wrapperContent {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: red;
}

angular code:

var contentEditor = angular.module("DragDrop", []);

contentEditor.controller('AppCtrl', function($scope) {

  $scope.users = [{
    initials: 'GY'
  }, {
    initials: 'XX'
  }, {
    initials: 'KK'
  }, {
    initials: 'TT'
  }, {
    initials: 'AA'
  }, {
    initials: 'QQ'
  }, {
    initials: 'PP'
  }, {
    initials: 'SS'
  }, {
    initials: 'MM'
  }, {
    initials: 'RS'
  }, {
    initials: 'KL'
  }, {
    initials: 'CJ'
  }, {
    initials: 'RT'
  }, {
    initials: 'DJ'
  }, {
    initials: 'XG'
  }, {
    initials: 'XX'
  }];

});

Answer 1

It doesn't matter if you are using AngularJS or Meteor to work. It is just the CSS and the way you lay out the elements. Use this as a base:

/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* End Praveen's Reset for Fiddle ;) */
a {text-decoration: none;}

html, body {height: 100%;}
body {padding-top: 50px; padding-left: 75px;}
p {margin: 0 0 10px;}

header {background-color: #000; position: fixed; top: 0; width: 100%; z-index: 2; left: 0;}
header h1 {line-height: 1; text-align: center; padding: 5px 0; font-weight: 1.5em;}
header h1 a {font-weight: normal; color: #fff;}

aside {position: fixed; left: 0; height: 100%; top: 30px; background-color: #99f; padding-top: 25px; z-index: 1; width: 70px;}

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<header>
  <h1><a href="">Heading</a></h1>
</header>
<aside>
  <nav>
    <ul>
      <li><a href="">Item 1</a></li>
      <li><a href="">Item 2</a></li>
      <li><a href="">Item 3</a></li>
      <li><a href="">Item 4</a></li>
      <li><a href="">Item 5</a></li>
    </ul>
  </nav>
</aside>
<p>Jason John Gesser (born May 31, 1979) is an American college football coach and former player, currently the quarterbacks coach for the Wyoming Cowboys of the Mountain West Conference.</p>
<p>He was previously the interim head coach, offensive coordinator, quarterbacks coach, and recruiting coordinator for the Idaho Vandals of the WAC. He played quarterback for Washington State Cougars of the Pac-10 under head coach Mike Price, and played in the 2003 Rose Bowl. As a professional, Gesser played for the Utah Blaze of the Arena Football League, the Calgary Stampeders of the Canadian Football League, and the Tennessee Titans of the National Football League. He was originally hired at Idaho as running backs coach in June 2011. Gesser is the grandson of Green Bay Packers Hall of Fame member Joseph "Red" Dunn.</p>
<p>Jason John Gesser (born May 31, 1979) is an American college football coach and former player, currently the quarterbacks coach for the Wyoming Cowboys of the Mountain West Conference.</p>
<p>He was previously the interim head coach, offensive coordinator, quarterbacks coach, and recruiting coordinator for the Idaho Vandals of the WAC. He played quarterback for Washington State Cougars of the Pac-10 under head coach Mike Price, and played in the 2003 Rose Bowl. As a professional, Gesser played for the Utah Blaze of the Arena Football League, the Calgary Stampeders of the Canadian Football League, and the Tennessee Titans of the National Football League. He was originally hired at Idaho as running backs coach in June 2011. Gesser is the grandson of Green Bay Packers Hall of Fame member Joseph "Red" Dunn.</p>