Я пытаюсь создать страницу с двумя боковыми панелями слева (ссылки на первой боковой панели откроют больше ссылок во втором столбце, что, в свою очередь, откроет страницы с контентом).Мне бы хотелось, чтобы обе боковые панели были зафиксированы в таком положении, чтобы они не прокручивались, но есть вероятность, что боковые панели могут оказаться длиннее, чем размер экрана большинства людей, из-за большого количества ссылок, которые могут отображаться.
Как сделать так, чтобы, если одна из боковых панелей длиннее высоты экрана, она прокручивалась с остальной частью страницы, но при достижении конца боковой панели она прекращала прокручиваться, даже если остальная частьсодержимое страницы все еще может прокручиваться?
Примером того, чего я пытаюсь добиться, является входящая почта 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>