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

我正在尝试创建一个页面，其左侧有两个侧栏（第一个侧栏中的链接将在第二栏中打开更多链接，从而打开内容页面）。我希望两个侧边栏的位置固定，以免滚动，但由于可显示大量链接，侧边栏最终可能会比大多数人的屏幕尺寸更长。如何添加两个单独的固定侧边栏，如果内容超出屏幕高度，就会滚动？

我该如何做到这一点，以便如果其中一个侧边栏比屏幕高度长，则会与页面的其余部分一起滚动，但是当到达侧边栏的末尾时，即使其余部分网页的内容仍然可以滚动？

我想要实现的一个示例是在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>

来源

2012-01-16 Bob

你张贴不起作用像你说的它的Gmail的例子。如果视口太小，它是两个单独的滚动条。窗口滚动条控制菜单，内部滚动条控制内容。侧边栏只是相对定位在页面上，邮件内容设置为overflow: scroll; height: 100%，因此它不会扩展页面。这意味着只有菜单栏才能扩展页面，因为内容一旦推过页面高度的100％就会自动生成它自己的滚动条。

如果你想用一个滚动条实现这一点，它将需要JavaScript。

来源

2012-01-16 15:38:31

你知道是否有教程吗？ – Bob 2012-01-16 17:06:50

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

回答

相关问题