Question

通过这个网站以及其他网站，我找不到针对这个具体问题的解决方案。在查看以下示例（也在下面）后，可以最好地描述我想要实现的目标： http://jsfiddle.net/yev8/HRQB5/

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

我想要实现的目标：我想将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;
    }

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

2列固定流体布局，带有固定水平条和滚动内容

1 个答案: