Page content to not scroll off page (no iframe) - scroll

Question

It’s difficult for me to word this question as I do not know the correct terminology. I’m trying to make a website so that when I scroll the main content, it does not scroll off the page. I want the main content to end somewhere in the middle of the page so as not to cover my “fixed” background image. But I do not want an iframe. In other words, it'll look somewhat like an iframe, but it should be controlled by the main scroll bar.
Anyway, I hope that made sense. I'd appreciate your suggestions.

Answer 1

Can use two <div>s that will cover the top and bottom part so that your text will go underneath them.
+----------------+
|+--------------+|
|| top ||
|+--------------+|
| your text |
| text |
|+--------------+|
|| bottom ||
|+--------------+|
+----------------+
On the z-index, the top and bottom will be over the main layer, and they will be positioned fixed to the top-left corner and bottom-left corner.
HERE: http://jsfiddle.net/FE2Wg/3/

Answer 2

Are you already using background-attachment: fixed; ?
Or overflow-y: scroll; with a div?

Answer 3

You want to show the scroll bar in a block of your HTML, right? Try using the CSS overflow property.
Reference: www.w3schools.com/css/pr_pos_overflow.asp
Try this in your page code:
<style type="text/css">
<!--
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
-->
</style>
<div class="scroll">
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
</div>
Is this you are trying to do??