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/

由于

Answer 1

我看到你还在这个项目上。还有很多答案，但我看到没有人做出我认为你要求的实例。

Here's a working（我希望）做我认为你要求的例子。

我添加了内容移动包装器，使高度仍然可以达到100％。您可以从this answer了解有关该技术的更多信息。我也删除了所有绝对定位，我认为没有理由你应该这样做。

每个包装器调整以前的内容，首先是高度为40px的顶部栏，然后是30px的标题。

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

preview

正如您所看到的，通过下面的代码，可以做一个仅限CSS的解决方案，尽管其他人让您相信。只需要从CSS控件中获取一些技巧。

伙计，我真是个笨蛋。

Example |代码

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

Answer 2

您想要滚动的元素应该

定义了高度和宽度
具有属性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;
}

Answer 3

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

唯一的方法是div的大小是否必须修复，或者你必须使用一些JavaScript来找出确切的高度。其他用户已经提出了使用CSS完成此操作的方法。

所以，这是一种使用jQuery

的方法

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

Demo

Answer 4

在你的情况下改变CSS：

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

Answer 5

您应该定义height的{{1}}以显示其上的滚动条。是否使用javascript或jquery计算它。

<div id="main"

检查此更新的jsFiddle。

Answer 6

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

工作

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

Answer 7

只有您知道#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中测试

在侧边栏中创建滚动条

7 个答案: