Как-бэ фрейм

Selen · March 8, 2011

Задача следующего характера.

Имеется страница с хедером и футером. Как реализовать прокрутку контента между хедером и футером? Без использования фреймов.

Возможно ли реализация чистым HTML+CSS ? Или тут потребуется Java Script ?

psywalker · March 8, 2011

Задача следующего характера.
Имеется страница с хедером и футером. Как реализовать прокрутку контента между хедером и футером? Без использования фреймов.
Возможно ли реализация чистым HTML+CSS ? Или тут потребуется Java Script ?

Возможно на HTML+CSS

Serlutin · March 8, 2011

overflow: auto или overflow: scroll и задание высоты принесёт сколл в ваш браузер.

Int · March 8, 2011

You must use the force, Luke =))

position:fixed - скорее всего то, что нужно. Ну и margin для блока с контентом

Serlutin, хватит опережать меня во всех топиках.

Selen · March 9, 2011

А можно поподробнее ? Или указать ссылку, где об этом можно почитать ?

Ответы данные на мой вопрос определенно правильные, но краткие и не понятные для меня (

Если можно развернутый ответ.

Есть:

блок А - хедер

блок Б - контент

блок С - футер

Высота блока А определена размером текста + паддинг сверху и снизу.

Блок С - аналогично.

Какие стили, к какому блоку применять ?

wanntuzz · March 9, 2011

css не будет работать для фреймов, это таблицы должны быть

Int · March 9, 2011

И без таблиц можно. Хотя и этот вариант не стоит отвергать если ничего не получится

<div class="header">Текст с пэддингами и всем таким</div>
<div class="content">Много-много текста, чтобы было что прокручивать</div>
<div class="footer">Футер</div>

html {overflow:hidden;}

.header {
Тут что угодно
border:1px solid black;
}

.content {
overflow-y:scroll;
height:600px;
}

.footer {
height:100px;
}

Может примерно вот примерно так? Без всяких fixed, просто добавить диву скрол?

Если футер должен лепиться к низу страницы, то решение будет другим.

SelenIT · March 9, 2011

это таблицы должны быть

Стью Николз, как-бэ, не согласен =)

psywalker · March 9, 2011

Блин, да что ж такое то. Уже невозможно на это смотреть. Как не зайду, ребята всё мучаются и мучаются. Неет, пора с этим кончать уже. :unsure:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body,html { height: 100%; overflow: hidden;}

#header,#footer { width: 100%; z-index: 1; position: absolute; height: 100px; background: red; }
#footer { bottom: 0; left: 0;}

#content { overflow: auto; right: 0px; position: absolute; top: 100px; bottom: 100px;}
p { padding: 0px;}
</style>
</head>

<body>

<div id="header"></div>
<div id="content">
<p>А можно поподробнее ? Или указать ссылку, где об этом можно почитать ?
Ответы данные на мой вопрос определенно правильные, но краткие и не понятные для меня (

Если можно развернутый ответ.

Есть: