在侧边栏中创建滚动条 [英] create a scroll bar in a sidebar

问题描述

我正在尝试在#main div中创建一个滚动条，以便可以滚动而不滚动页面或标题，但是它不起作用.我想念什么?

I'm trying to create a scroll bar inside the #main div so that I can scroll that without scrolling the page or the title but it isn't working. What am I missing?

我的代码如下:

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/

You can find an example JSFiddle here: http://jsfiddle.net/PTRCr/

谢谢

推荐答案

您仍然在我看到的这个项目上.还有很多答案，但是我看不出有人提出了我认为您要的内容的有效示例.

You're still on this project I see. There's also a lot of answers, but I see no one has made a working example of what I think you're asking for.

这是一个可行的示例，该示例(希望)能够满足您的要求

Here's a working example that (I hope) does what I think you're asking for.

我添加了内容转换包装器，以使高度仍可以是100％.您可以从此答案中详细了解该技术.我也删除了所有的绝对定位，但我认为没有理由这么做.

I added content shifting wrappers so that the height can still be 100%. You can read more about that technique from this answer. I also removed all that absolute positioning, I see no reason why you should do that.

每个包装器都会针对上一个内容进行调整，首先是顶部栏的高度为40px，然后是标题的30px.

Each wrapper adjusts for the previous content, first the top bar with the height 40px and then the title with 30px.

此示例还应遵循您以前的规格，在调整大小后，滚动条将保持在同一基线上.

This example should also follow your previous specifications, where the scrollbars will stay on the same baseline when resized.

正如您所看到的那样，通过以下代码，尽管其他人已经使您相信了，但可以做一个仅CSS的解决方案.只需从CSS持有包中获取一些技巧即可.

As you can see, by the code below, it is possible to do a CSS only solution despite what others have lead you to believe. It just takes a bit of tricks from the bag of CSS holding.

老兄，我真是个傻瓜.

示例 |代码

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

这篇关于在侧边栏中创建滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！