Menu
I can't figure out, on how to go around this problem for moving content within two pages + outside content.
I have following layout:
I want to scroll pages content from the main scrollbar without any page scroll bar (like gmail compose example)
The main problem is. book will show after header and if user is using smaller screen resolution, it will show scrollbar to scroll down to see book properly.
Then we have two pages, which content are different from each other and each page can be longer then the other one. so we want to scroll through all the data, before we continue scrolling back to footer again.
jsFiddle Example: http://jsfiddle.net/7vqzF/2/
It would be awesome to solve this from css only.
Layout Structure: (solution should have only one main browser scrollbar, to control the pages and outside book content from it.)
788
If I got your question right you are looking for the CSS attribute fixed. Here is some HTML including CSS that might do exactly what your are after:
<html>
<head>
<style>
body {
margin-top: 150px;
}
.header {
width: 100%;
position: fixed;
top: 0;
background-color: white;
border-bottom: 2px solid lightblue
}
.footer {
width: 100%;
position: fixed;
bottom: 0;
background-color: white;
border-top: 2px solid lightblue
}
.book table td {
vertical-align: top;
}
.page1, .page2 {
border: solid 1px red;
width: 400px;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
<ul>
<li>home</li>
<li>contact us</li>
</ul>
</div>
<div class="book">
<table>
<tr>
<td>
<div class="page1">
<h2>Page1</h2>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
...
</div>
</td>
<td>
<div class="page2">
<h2>Page2</h2>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
...
</div>
</td>
</tr>
</table>
</div>
<div class="footer">
My Footer
</div>
</body>
</html>
Here is a screenshot from my browser showing the above HTML:
The Browser-Scrollbar scrolls only the page1/page2 <div> elemtents but not the header and footer elements.
And finally here is the jsFiddle Link for the online-demo.
180
Put your header part which needs to be in fixed in separate div and apply these styles.
<div class="fix">
<h1> Header</h1>
<menu><ul><li>home</li><li>contact us</li></ul></menu>
</div>
.fix{
position:fixed;
top:0px;
left:0px;
background:#FFF;
width:100%;
border-bottom:1px solid black;
}
for space add another div to bottom of the header
<div class="space"></div>
.space{
width:100%;
height:150px;
}
Here is the jsfiddle.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
