Question

我正在尝试创建一个左侧有两个侧边栏的页面（第一个侧边栏中的链接将在第二列中打开更多链接，这将打开内容页面）。我希望两个侧边栏都固定在适当位置，这样它们就不会滚动，但由于可以显示大量的链接，侧边栏有可能最终比大多数人的屏幕尺寸更长。

如何制作它，以便其中一个侧边栏比屏幕高度长，它会与页面的其余部分一起滚动，但是当到达侧边栏的末端时，它会停止滚动，即使页面的其余部分是内容仍然可以滚动？

我正在尝试实现的一个示例是在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>

Answer 1

您发布的Gmail示例与您说的不同。如果视口太小，则它是两个单独的滚动条。窗口滚动条控制菜单，内部控制菜单。侧边栏位于页面上相对位置，邮件内容设置为overflow: scroll; height: 100%，因此不会扩展页面。这意味着只有菜单栏可以扩展页面，因为一旦内容超过页面高度的100％，内容会自动生成它自己的滚动条。

如果您想通过一个滚动条实现此功能，则需要使用javascript。

如何添加两个单独的固定侧边栏，如果它们的内容超出屏幕高度则滚动？

1 个答案: