CSS-带有固定标题的侧边栏

Question

首先，这里是代码-http://plnkr.co/edit/Iq9bjzCljALHORYIRvhe?p=preview

现在，您可以看到有两个部分-带有红色背景色的侧边栏标题和带有黑色背景色的侧边栏项目。

现在，我要获取的是使滚动条仅在侧边栏的黑色背景部分可用，这意味着红色标题已修复。

我该怎么办？

这是html代码-

<html ng-app="app">

<head>
    <script data-require="angular.js@1.3.15" 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;
}

Answer 1

好的，现在我知道了。 我更新你的pl子。 看到它的工作：

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

更改非常简单：

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

就这样。

Answer 2

您的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

CSS-带有固定标题的侧边栏

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-11-05 09:44:10

解决方案2
1 2015-11-05 09:46:13

CSS-带有固定标题的侧边栏

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-11-05 09:44:10

解决方案2 1 2015-11-05 09:46:13

解决方案1
2 已采纳 2015-11-05 09:44:10

解决方案2
1 2015-11-05 09:46:13