固定标题和侧边栏但可滚动的内容和标题区域

Question

我正在尝试为主要内容区域创建水平滚动。我有一个标题、侧边栏和一个 div (wrapperContent)。基本上标题和 div (wrapperContent) 应该像TeamWeek 一样水平滚动。侧边栏是固定的，只会垂直滚动

在我的 div wrapperContent 类上，我放置了一个溢出自动，它应该可以让我滚动。

基本上黄色和红色背景应该一直存在并且应该是唯一可滚动的

使用角度

这是我的 codepen 示例 -> http://codepen.io/GY22/pen/PqeoZv

hmtl 代码：

<!-- 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代码：

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;
}

角码：

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

使用 AngularJS 或 Meteor 工作并不重要。它只是 CSS 和您布置元素的方式。以此为基础：

/* 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>