1

浏览此站点和其他站点，我还没有找到针对此特定问题的解决方案。在查看以下示例（也放在下面）之后，可以最好地描述我想要实现的目标：http: //jsfiddle.net/yev8/HRQB5/

当前情况：在这个例子中，我有一个左列（固定宽度）和一个右列（液体宽度）。在右栏中有四个条。与顶部对齐的两个条在每一页上都是相同的。与底部对齐的两个条在每一页上都是不同的，两者的每种组合都是可能的。现在在中间我有一个 div，“内容”，它填满了可用空间，如果需要，还有一个垂直滚动条。

我想要实现的目标：我希望将 div 的滚动条替换为垂直覆盖整个页面的滚动条，就像默认滚动条一样。滚动时，左侧菜单和所有栏不应该改变它们的位置。唯一滚动应该是中间的内容 div。

我不知道这是否可能，但在理想情况下，我只想用 css 解决这个问题。如果这是不可能的，javascript（有或没有 jQuery）都可以工作。

谁能给我任何建议或指出正确的方向？我似乎无法让它按我想要的方式工作。

我当前的html：

<!doctype html>
<html lang="nl">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <title></title>
        <link href="css/stylesheet.css" rel="stylesheet" media="screen">
    </head>
    <body>
        <div id="wrapper">
            <div id="left">
                <ul>
                    <li><a href="#" title="">Menu item</a></li>
                    <li><a href="#" title="">Menu item</a></li>
                    <li><a href="#" title="">Menu item</a></li>
                </ul>
            </div>
            <div id="right">
                <div id="bar-1">bar-1</div>
                <div id="bar-2">bar-2</div>
                <div id="content">
                    <div style="height:400px;background-color:#ff0;"></div>
                    <div style="height:400px;background-color:#f0f;"></div>
                    <div style="height:400px;background-color:#0f0;"></div>
                    <div style="height:400px;background-color:#00f;"></div>
                </div>
                <div id="bar-3">bar-3</div>
                <div id="bar-4">bar-4</div>
            </div>
        </div>
    </body>
</html>

我当前的CSS：

html, body {
    height: 100%;
    background-color: #fff;
    color: #2f2f2f;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
}

div#wrapper {
    height: 100%;
    margin: auto;
    position: relative;
}

div#left {
    height: 100%;
    float: left;
    width: 256px;
    overflow-y: auto;
    background-color: #fcfcfc;
}

div#right {
    height: 100%;
    position: relative;
    margin-left: 256px;
}

    div#right div#bar-1 {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        height: 64px;
        top: 0;
        background-color: #eaeaea;
    }

    div#right div#bar-2 {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        top: 64px;
        height: 32px;
        background-color: #979797;
    }

    div#right div#content {
        position: absolute;
        left: 0;
        right: 0;
        top: 96px;
        bottom: 224px;
        overflow-y: scroll;
    }

    div#right div#bar-3 {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 128px;
        height: 96px;
        background-color: #eaeaea;
    }

    div#right div#bar-4 {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 128px;
        background-color: #d5d5d5;
    }
4

1 回答 1

1

你的意思是这样的：http: //jsfiddle.net/Y2spp/2/

我根据其他条在内容顶部和底部添加了填充。确保内容的高度为 100%，并且条形图位于内容的顶部。

只有 CSS 更改：

div#right div#bar-1 {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 17px;
    height: 64px;
    z-index:4;
    top: 0;
    background-color: #eaeaea;
}

div#right div#bar-2 {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 17px;
    top: 64px;
    z-index:4;
    height: 32px;
    background-color: #979797;
}

div#right div#content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    bottom: 0px;
    padding-top:96px;
    padding-bottom:224px;
    overflow-y: scroll;
    z-index:2;
}

div#right div#bar-3 {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 17px;
z-index:4;
    bottom: 128px;
    height: 96px;
    background-color: #eaeaea;
}

div#right div#bar-4 {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 17px;
    z-index:4;
    bottom: 0;
    height: 128px;
    background-color: #d5d5d5;
}​
于 2012-12-13T16:05:53.833 回答