Is an Iframe my only option?

Question

I have a job to develop a website. My client wants it so that there is a header, a menu and for the content a rectangle-like box in which you can scroll the text. So that header and menu don't move but the text in the box does.

It should look like this:

***********header image ***********
menu menu menu menu

--------------
| you       ||
| can       || 
| scroll in ||
| this box  ||
|_____________

• Is my only option to implement this an iframe?
• Would it be bad practice to use an iframe for this?

Answer 1

You can use a normal div and set the overflow property to 'scroll' in the CSS. An iFrame would be "bad" practice in this instance.

Answer 2

You can do this with a div which will have a specified width and height and a css value of overflow to auto.

Using an iframe to do this is an overkill in terms of:

• client side performance (more http request(s))
• server side bandwidth
• increase in website complexity & maintenance

Answer 3

You can also have a DIV and have it display scrollbars. See here http://www.spiderwebmastertools.com/divscroller.html

Answer 4

Nope, go for a DIV:

<div id="iframeReplacement">
  <p>CONTENT GOES HERE :)</p>
</div>

With the CSS:

#iframeReplacement {
  height: 400px; /* set to your height */
  width: 400px; /* set to your width */
  overflow-x: auto; /* can be auto, scroll or hidden */
  overflow-y: auto; 
}

Answer 5

No, you can also use css overflow: scroll. For example:

<style>
.infoBox {
    width: 100px;
    height: 100px;
    display: block;
    overflow: scroll;
}
</style>
<div class="infoBox">Some text</div>

Answer 6

Is my only option to implement this an iframe?

No. See overflow.

Would it be bad practice to use an iframe for this?

Yes. It is pretty bad practice to do this at all (screen real estate is better used for showing content and minimizing, the amount of scrolling a user has to do), but an iframe is one of the worst ways of achieving this.

Answer 7

Alternatively you could make the header and navigation bar static and just have the entire page the "box that scrolls."

This can be accomplished fairly easily:

div#header {
  position:absolute;
  top:0;
  left:0;
}

Here is a website with an example: http://limpid.nl/lab/css/fixed/header-and-left-sidebar