css - 在侧边栏中创建滚动条

Question

我正在尝试在#main div 中创建一个滚动条，这样我就可以在不滚动页面或标题的情况下滚动它，但它不起作用。我错过了什么？

我的代码如下：

CSS

#topbar {
    height: 40px;
    background-color: blue;
}

#sidebar {
    position: absolute;
    top: 40px;
    bottom: 0px;
    width: 80px;
    overflow: hidden;   
}

#title {
    height:30px;
    background-color: red;
}

#main {
    height: auto;
    overflow: scroll;
}

HTML

<div id="topbar">
    hello
</div>
<div id="sidebar">
    <div id="title">
        title
    </div>
    <div id="main">
        <!-- lots and lots of text-->
    </div>
</div>

你可以在这里找到一个示例 JSFiddle：http: //jsfiddle.net/PTRCr/

谢谢

score 2 · Accepted Answer

你还在我看到的这个项目上。还有很多答案，但我认为没有人提出我认为您所要求的工作示例。

这是一个工作示例，（我希望）可以满足我的要求。

我添加了内容移动包装器，这样高度仍然可以是 100%。您可以从此答案中阅读有关该技术的更多信息。我还删除了所有绝对定位，我看不出你应该这样做的理由。

每个包装器都会针对之前的内容进行调整，首先是高度为 40 像素的顶部栏，然后是 30 像素的标题。

此示例还应遵循您之前的规范，其中滚动条在调整大小时将保持在同一基线上。

正如你所看到的，通过下面的代码，尽管其他人已经让你相信了，但可以做一个纯 CSS 的解决方案。它只需要从 CSS 持有包中获取一些技巧。

伙计，我真是个笨蛋。

示例| 代码

HTML

<div id='container'>
    <div id="top-bar">hello</div>
    <div class="wrapper">
        <div class="side-bar">
            <div class="title">title</div>
            <div class="content_wrapper">
                <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
            </div>
        </div><div class="side-bar">
            <div class="title">title</div>
            <div class="content_wrapper">
                <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
            </div>
        </div><div class="side-bar">
            <div class="title">title</div>
            <div class="content_wrapper">
                <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
            </div>
        </div><div class="side-bar">
            <div class="title">title</div>
            <div class="content_wrapper">
                <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
            </div>
        </div>
    </div>
</div>

CSS

body, html{
    height:100%;
    width: 100%;
    line-height: 100%;
    margin: 0;          /* Normalization */
    padding: 0;         /* Normalization */
}

div{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#container{
    height:100%;
    width: 100%;
    text-align: center;
    overflow: auto;
}

#top-bar{
    height: 40px;
    line-height: 40px;
    border: 1px solid lightblue;
    background: blue;
    color: white;
    text-align: center;
}

.side-bar {
    width: 120px;
    height: 100%;
    text-align: center;
    color: white;
    border: 1px solid DarkOrchid;
    display: inline-block;
    vertical-align: top;
}

.title {
    height:30px;
    line-height: 30px;
    border: 1px solid salmon;
    background: red;
}

.wrapper{
    margin-top: -40px;
    padding-top: 40px;
    height: 100%;
    width: 100%;

    white-space: nowrap;
}

.wrapper > div{
    white-space: normal;
}

.content_wrapper{
    margin-top: -30px;
    padding-top: 30px;
    height: 100%;
}

.content{
    color: black;
    height: 100%;
    overflow: auto;
}

score 1 · Accepted Answer

CSS 是样式表，其唯一目的是为文档设置样式。他们无法调查预先存在的元素。

唯一的方法是 div 的大小是否必须固定，或者您必须使用一些 JavaScript 来找出确切的高度。其他用户已经介绍了可以使用 CSS 完成此操作的方法。

所以，这是一种使用 jQuery 的方法

$("#main").height($(document).innerHeight()-$("#title").outerHeight() - $("#topBar").outerHeight());

演示

score 1 · Accepted Answer

你想要可滚动的元素，应该

定义了高度和宽度
有属性overflow:auto

例子：

.scrollArea {
 width: 275px;
 height: 100px;
 padding-left: 5px;
 padding-right: 5px;
 border-color: #6699CC;
 border-width: 1px;
 border-style: solid;
 float: left;
 overflow: auto;
}

score 0 · Accepted Answer

您需要为#main 设置高度。它在http://jsfiddle.net/PTRCr/7/工作

#main {
    height: 100px;
    overflow-y: scroll;
}

score 0 · Accepted Answer

在您的情况下更改 CSS：

#sidebar {
position: absolute;
top: 40px;
bottom: 40px;
width: 80px;
overflow: scroll;   
}

score 0 · Accepted Answer

您应该定义heightof<div id="main"以在其上显示滚动条。无论您是使用 javascript 还是 jquery 计算它。

   #topbar {
    height: 40px;
    background-color: blue;
}

#sidebar {
    position:absolute;
    top: 40px;  
    bottom: 40px;
    width: auto;
    height:200px;
    overflow: hidden;   
}

#title {
    height:30px;
    background-color: red;
}

#main {
    height: 100px;
    width: 100%;
    overflow:auto;
}

检查这个更新的 jsFiddle。

score 0 · Accepted Answer

仅当您知道#title 的高度时才可能，无论是在其中一个px还是作为其父容器的百分比

#title 在px jsFiddle中设置

#main {
    position:absolute;
    top:30px; /* set this to whatever you have set the height of #title to*/
    bottom:0px;
    overflow-y: scroll;
}

#title 设置为 % jsFiddle - 在 IE/FF/Chrome 中测试

css - 在侧边栏中创建滚动条

7 回答 7

Related

Reference