浏览本网站和其他网站，我没有找到针对此特定问题的解决方案。查看以下示例(也放在下面)后，可以最好地描述我想要实现的目标: 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;
}
最佳答案
你的意思是这样的: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;
}
关于css - 具有固定水平条和滚动内容的 2 列固定流体布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13863475/