StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If I got your question right you are looking for the CSS attribute <code>fixed</code>. Here is some HTML including CSS that might do exactly what your are after:</p> <pre><code><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> </code></pre> <p>Here is a screenshot from my browser showing the above HTML: <img src="https://i.stack.imgur.com/RpgTa.png" alt="enter image description here"></p> <p>The Browser-Scrollbar scrolls only the page1/page2 <code><div></code> elemtents but not the header and footer elements.</p> <p>And finally here is the <a href="http://jsfiddle.net/FFKjY/" rel="noreferrer">jsFiddle Link</a> for the online-demo.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload