我正在尝试创建一个左侧有两个侧边栏的页面(第一个侧边栏中的链接将在第二列中打开更多链接，这将依次打开内容页面)。我希望两个侧边栏都固定在适当的位置，这样它们就不会滚动，但由于可以显示大量链接，侧边栏最终可能会比大多数人的屏幕尺寸更长。
我怎样才能做到这一点，如果其中一个边栏比屏幕高度长，它会与页面的其余部分一起滚动，但是当到达边栏的末尾时，它会停止滚动，即使页面的其余部分内容仍然可以滚动？
我试图实现的一个例子是 Gmail 收件箱，边栏通常是静态的，但如果屏幕太小，它可以滚动。
以下是我目前所拥有的。两个侧边栏列是 leftnavbox 和 rightnavbox。
非常感谢
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
body {
font-size: 100%;
}
#container {
min-height: 100%;
background-color: #DDD;
width: 100%;
margin: 0 auto;
overflow: auto;
}
* html #container {
height: 100%;
}
#contentwrapper{
float: right;
width: 100%;
margin-left: -360px;
}
#content{
margin-left: 360px;
}
#header{
height: 30px;
background: #000;
color: #fff;
}
#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixels*/
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 180px; /*Width of right column in pixels*/
background: #FDE95E;
}
#leftnavbox{
float: left;
width: 180px; /*Width of right column in pixels*/
background: #ffcc00;
position: absolute;
top: 0px;
left: 0px;
position: fixed;
}
#rightnavbox{
float: left;
width: 180px; /*Width of right column in pixels*/
background: #ffcc00;
position: absolute;
top: 0px;
left: 180px;
position: fixed;
}
</style>
</head>
<body>
<div id="container">
<div id="contentwrapper">
<div id="content">
<div id="header">header</div>
content
</div>
</div>
<div id="leftcolumn">
<div id="leftnavbox">
left nav
</div>
</div>
<div id="rightcolumn">
<div id="rightnavbox">
right nav
</div>
</div>
</div>
</body>
</html>
最佳答案
您发布的 Gmail 示例并不像您所说的那样工作。如果视口(viewport)太小，它是两个单独的滚动条。窗口滚动条控制菜单，内部滚动条控制内容。侧边栏只是相对于页面定位，邮件内容设置为overflow: scroll; height: 100% 这样它就不会扩展页面。这意味着只有菜单栏可以扩展页面，因为内容会在超过页面高度的 100% 时自动生成自己的滚动条。
如果你想用一个滚动条实现这一点，它需要javascript。
关于css - 如何添加两个单独的固定侧边栏，如果它们的内容超出屏幕高度则滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8882251/