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

Question

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

在我的 div wrapperContent 的类上，我放置了一个自动溢出，它应该使我能够滚动。

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

使用 Angular

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

HTML 代码:

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

Angular 代码:

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>