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: 120px00170px; /* add adjacent elements' size + padding */padding: 10px;
}
</style></head><body><header>
This will stay on the top of the browser window.
</header><divid="sidebar">
This will stay on the left.
</div><divid="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"