CODEWITHSUNDEEP
csshtmlsidebar
Bob
Bob

Reputation: 121

How to add two separate, fixed sidebars, that scroll if their content extends past the screen height?

I'm trying to create a page that has two sidebars on the left (links in the first sidebar will open more links in the second column, which will in turn open up content pages). I'd like both sidebars to be fixed in position so they don't scroll, but there's a chance that the sidebars could end up being longer than most people's screen size, due to the large amount of links that could be displayed.

How can I make it so that if one of the sidebars is longer than the screen height, it scrolls with the rest of the page, but when the end of the sidebar is reached it stops scrolling even if the rest of the page's content can still scroll?

An example of what I'm trying to achieve is on the Gmail inbox, the sidebar is usually static but it can scroll if the screen is too small.

Below is what I have so far. The two sidebar columns are leftnavbox and rightnavbox.

Many thanks

<!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>

Upvotes: 2

Views: 2294

Answers (1)

George Reith
George Reith

Reputation: 13476

The Gmail example you posted doesn't work like you say it does. It is two seperate scrollbars if the viewport is too small.The window scrollbar controls the menu and an inner one for content. The sidebar is just relatively positioned on the page and the mail contents is set to overflow: scroll; height: 100% so that it doesn't extend the page. This means that only the menubar can extend the page as the content automatically generates it's own scrollbar once it pushes past 100% of the page height.

If you want to achieve this with one scrollbar, it will require javascript.

Upvotes: 1

Related Questions