【发布时间】：2012-12-13 15:51:48
【问题描述】：
浏览此站点和其他站点，我没有找到解决此特定问题的方法。在查看以下示例（也放在下面）之后，可以最好地描述我想要实现的目标： 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;
}
【问题讨论】：
标签： css fixed vertical-scrolling liquid-layout