Fatal编程技术网
  • css/
  • Css 2列固定流体布局，带有固定水平条和滚动内容

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

css

Css 2列固定流体布局，带有固定水平条和滚动内容,css,fixed,vertical-scrolling,liquid-layout,Css,Fixed,Vertical Scrolling,Liquid Layout,通过浏览这个网站和其他网站，我还没有找到解决这个具体问题的方法。在查看以下示例（也放在下面）后，我想要实现的目标可以得到最好的描述： 当前情况： 在这个例子中，我有一个左列（固定宽度）和一个右列（液体宽度）。在右栏中有四个栏。与顶部对齐的两个栏在每页上都是相同的。在每一页上，与底部对齐的两个栏是不同的，这两个栏的每一个组合都是可能的。现在在中间，我有一个div，“内容”，它填充了可用的空间，如果需要的话，有一个垂直滚动条。 我想要达到的目标： 我希望div的滚动条被替换为垂直覆盖整个页面的滚动

通过浏览这个网站和其他网站，我还没有找到解决这个具体问题的方法。在查看以下示例（也放在下面）后，我想要实现的目标可以得到最好的描述：

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

我想要达到的目标： 我希望div的滚动条被替换为垂直覆盖整个页面的滚动条，就像默认的滚动条一样。滚动时，左侧菜单和所有栏不应改变其位置。滚动的唯一内容应该是中间的content 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>
你的意思是这样的：

我根据其他栏在内容的顶部和底部添加了填充。 确保内容为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;
}​
你的意思是这样的：

我根据其他栏在内容的顶部和底部添加了填充。 确保内容为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;
}​
谢谢你的回复，提米。好主意。顶部的填充物似乎起作用，但底部的填充物不起作用。我现在只看到content div中蓝色条的一半，这意味着content div中的内容现在部分位于底部条的后面。我现在（临时）在content div中放置了一个高度为224px的content filler div，以填充我需要的空间。我宁愿有一个没有这个的解决方案，因为每页的底部栏都不同，所以如果有人知道这个方法，请分享。：）您可能需要使用JS来进行此操作。垫底在小提琴中起作用，不是吗？对我来说，它在Chrome、Opera和Safari的小提琴中起作用。不适用于Firefox或Internet Explorer。因为，正如您所说的，无论如何我都需要使用Javascript来实现这一点，所以content filler div不会成为问题。谢谢你给我指明了正确的方向。回答接受！：）谢谢你的回复，提米。好主意。顶部的填充物似乎起作用，但底部的填充物不起作用。我现在只看到content div中蓝色条的一半，这意味着content div中的内容现在部分位于底部条的后面。我现在（临时）在content div中放置了一个高度为224px的content filler div，以填充我需要的空间。我宁愿有一个没有这个的解决方案，因为每页的底部栏都不同，所以如果有人知道这个方法，请分享。：）您可能需要使用JS来进行此操作。垫底在小提琴中起作用，不是吗？对我来说，它在Chrome、Opera和Safari的小提琴中起作用。不适用于Firefox或Internet Explorer。因为，正如您所说的，无论如何我都需要使用Javascript来实现这一点，所以content filler div不会成为问题。谢谢你给我指明了正确的方向。回答接受！：）