How To Have The Right Scrollbar On A Web Page Scroll Only The Middle Pane
If you look at messages page in facebook, there is a header and below it there are three sections. The scroll bar controls the middle section and the left and right sections remain
Solution 1:
You don't need to set anything special on the center section. Every block element you want to remain stationary needs to have position: fixed;.
eg
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
header {
display: block;
position: fixed;
z-index: 10; /* keeps the header over the content as the content gets scrolled */
top: 0;
width: 100%;
height: 100px;
padding: 10px;
background-color: black;
}
#sidebar {
position: fixed;
top: 120px; /* add height + padding of header */
left: 0;
width: 150px;
padding: 10px;
background-color: blue;
}
#content {
margin: 120px 0 0 170px; /* add adjacent elements' size + padding */
padding: 10px;
}
</style>
</head>
<body>
<header>
This will stay on the top of the browser window.
</header>
<div id="sidebar">
This will stay on the left.
</div>
<div id="content">
This will scroll normally.
</div>
</body>
</html>
Post a Comment for "How To Have The Right Scrollbar On A Web Page Scroll Only The Middle Pane"