Question

我有一份工作来开发一个网站。我的客户想要它，以便有一个标题，菜单和内容一个类似矩形的框，您可以在其中滚动文本。因此标题和菜单不会移动，但框中的文字会移动。

它应该是这样的：

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

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

我唯一的选择是实现这个iframe吗？
为此使用iframe是不好的做法？

Answer 1

不，请去DIV：

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

使用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 2

您可以使用div指定width和height以及overflow到auto的css值。

使用iframe执行此操作在以下方面是一种过度杀伤：

客户端性能（更多http请求）
服务器端带宽
网站复杂性增加＆amp;维护

Answer 3

您可以使用普通div并将overflow属性设置为CSS中的“scroll”。在这种情况下，iFrame将是“糟糕”的做法。

Answer 4

你也可以有一个DIV并让它显示滚动条。见http://www.spiderwebmastertools.com/divscroller.html

Answer 5

不，你也可以使用css overflow：scroll。例如：

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

Answer 6

我唯一的选择是实现这个iframe吗？

没有。见overflow。

为此使用iframe是不好的做法？

是。完全这样做是非常糟糕的做法（屏幕空间更好地用于显示内容和最小化，用户必须做的滚动量），但iframe是实现此目的的最糟糕方式之一。

Answer 7

或者，您可以将标题和导航栏设置为静态，只需将整个页面设置为“滚动的框”。

这可以很容易地完成：

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

以下是一个包含示例的网站：http://limpid.nl/lab/css/fixed/header-and-left-sidebar

Iframe是我唯一的选择吗？

7 个答案: