Является ли Ифраме моим единственным вариантом?

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 и значение css от overflow до auto.

Использование iframe для этого является излишнимс точки зрения:

• производительность на стороне клиента (больше запросов http)
• пропускная способность на стороне сервера
• увеличение сложности и обслуживания веб-сайта

Answer 3

Вы можете использовать обычный div и установить для свойства overflow значение «scroll» в CSS.В этом случае iFrame будет «плохой» практикой.

Answer 4

В качестве альтернативы вы можете сделать заголовок и панель навигации статичными и просто поместить всю страницу в «поле прокрутки».

Это можно сделать довольно легко:

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

Вот сайт с примером: http://limpid.nl/lab/css/fixed/header-and-left-sidebar

Answer 5

Является ли мой единственный вариант реализации этого iframe?

Нет.См. переполнение .

Было бы плохой практикой использовать для этого iframe?

Да.Это вообще плохая практика (вообще, экранное пространство лучше использовать для отображения контента и минимизации, объем прокрутки, который должен выполнять пользователь), но iframe - один из худших способов достижения этого.

Answer 6

Нет, вы также можете использовать css overflow: scroll. Например:

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

Answer 7

Вы также можете иметь DIV и отображать полосы прокрутки. Смотрите здесь http://www.spiderwebmastertools.com/divscroller.html