的CSS - 边栏带有固定标题

这里首先是代码 - http://plnkr.co/edit/Iq9bjzCljALHORYIRvhe?p=preview 的CSS - 边栏带有固定标题

现在，你可以看到有两个部分 - 侧边栏标题，用红色的背景颜色，以及侧边栏项目，这与黑色的背景颜色。

现在，我试图让滚动仅在侧边栏的黑色背景部分可用，这意味着红色标题是固定的。

我该怎么做？

这里的HTML代码 -

<html ng-app="app"> 

<head> 
    <script data-require="[email protected]" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body> 

    <div class="container"> 
     <div ng-controller="SidebarController"> 
      <a href="#" id="navigation-toggle" ng-click="toggleState()">Navigation</a> 
      <div class="sidebar" sidebar-directive="state"> 
       <div class="topmenu">Menu</div> 

       <ul class="navigation"> 
        <li class="navigation-items"> <a href="#">Link1</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link2</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link3</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
        <li class="navigation-items"> <a href="#">Link4</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 

</body> 

</html>

和这里的CSS代码 -

body { 
    font-family: arial; 
} 
.sidebar { 
    position: absolute; 
    top: 0; 
    left: -160px; 
    transition: 100ms left; 
    height: 100%; 
    overflow-y: auto; 
} 
#navigation-toggle { 
    position: absolute; 
    left: 160px; 
    background: rgba(3, 159, 244, .95); 
    color: white; 
    text-decoration: none; 
    padding: 20px; 
} 
.show { 
    left: 0; 
} 
.navigation { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
.navigation-items a { 
    display: block; 
    background-color: #444; 
    color: white; 
    line-height: 2em; 
    text-decoration: none; 
    padding: 10px 30px; 
    width: 100px; 
} 
.navigation-items a:hover { 
    background-color: #222; 
} 
.topmenu { 
    background-color: #f00; 
    height: 70px; 
}

来源

2015-11-05 4this

在你plunker不会有一个红色标题行不通的。请使用正确的代码更新。 –

好了，现在我看到的。我更新你的抢劫者。见它的工作：

http://plnkr.co/edit/SwyhsdfeJtaNX7WU0Kao?p=preview

的变化是如此简单：

.sidebar { 
    overflow:hidden; 
} 
.navigation: { 
    height: calc(100% - 70px); 
    overflow:auto; 
}

而这一切。

来源

2015-11-05 09:44:10

你的CSS：

.sidebar { 
      position :fixed; 
      top : 0; 
      left : -160px; 
      transition : 100ms left; 
      border: 1px solid #f00; 
      height : 100%; 
     } 

.navigation { 
      list-style : none; 
      padding : 0; 
      margin : 0; 
      height:100%; 
      overflow-y:scroll; 

     }

http://plnkr.co/edit/AUzowwf0AOC9U7QLUlOW?p=preview

来源

2015-11-05 09:46:13

感谢您的帮助，但是我不知道您是否注意到当侧栏关闭时可以看到滚动条 – 4this

您欢迎，只需设置'.sidebar {left：-175px;}'即可完成，但是我的代码不适合，因为在更新之前我看不到红色框，所以需要将'ul'高度设置为'calc（100％ - 70px）;'但在我的情况下我无法知道它的高度 –

的CSS - 边栏带有固定标题

回答

相关问题