Page content to not scroll off page (no iframe)

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 mai开发者_如何学Cn 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.

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/

Are you already using background-attachment: fixed; ?

Or overflow-y: scroll; with a div?

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??