Разработка 3-х рядного HTML-макета

Я ответил на аналогичный вопрос, прежде чем: Процент высоты в процентах, но все же прокрутка

Вот один из подходов.

HTML:

<header>The Header...</header>
<div id="main">
    <div id="content">
        scrollable content area
        <p>Lorem ipsum dolor sit amet, ...</p>
    </div>
</div>
<footer>footer always appearing bottom of the browser screen</footer>

CSS:

html, body {
    height: 100%;
}
body { 
    margin: 0;
}
header {
    height: 100px;
    width: 100%;
    background: #bbb;
    position: absolute;
    top: 0;
}
#main {
    background: #ccc;
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 80px;
    left: 0;
    right: 0;
    overflow-y: auto;
}
#content {
    overflow: auto;
    background: green;
}
footer {
    position: absolute;
    bottom: 0;
    height: 80px;
    width: 100%;
    background: #aaa;
}

Хитрость заключается в создании абсолютно #main контейнер-контейнера, который охватывает область между заголовком и нижним колонтитулом, #main, используя верхние, нижние, левые, правые смещения и применять overflow-y: auto.

Затем #content займет пробел и, в конце концов, запустит полосу прокрутки на #main.

См. Демонстрацию по адресу: http://jsfiddle.net/audetwebdesign/aNRE9/

Просто скажи мне, что ты пробовал? Я не вижу ни одного заголовка, ни нижнего колонтитула, ни текста, содержащегося в умелом div.

Хорошо, дайте мне немного помочь вам.

То, что вы делаете, просто, но потребует от вас понимания сути.

Как сделать нижний колонтитул на дно.

footer {
 position: absolute; // position as absolute..
 bottom: 0; // margin-bottom as 0 
 max-width: 80px; // width
 margin: 0 auto; // margin..
}

Это заставит нижний колонтитул всегда оставаться в конце документа, который я подразумеваю внизу страницы.

Как сделать заголовок

header {
 position: absolute;
 top: 0;
 max-width: 100px;
 margin: 0 auto;
}

Как сделать прокручиваемый div

Я полностью не понимаю этого. Поэтому я просто собираюсь немного поправить вас.

Вы можете создать полосу прокрутки в div контента. Вы хотите это:

вертикальная полоса прокрутки должна находиться в области содержимого

Вы можете сделать это, используя это:

div {
 max-height: 100px;
 min-height: 100px;
}

Я предполагаю, что вы собираетесь изменить div на элемент или класс или id на тот, который у вас есть.

Создание прокручиваемого div с помощью полосы прокрутки.

Сначала вы создадите div с максимальной высотой, чтобы div не превышал высоту экрана. Затем вы можете использовать полосу прокрутки следующим образом:

overflow: scroll; 

Добавьте это свойство в элемент. Таким образом, у вас будет нижний колонтитул, заголовок и блок контента, для которых есть панель прокрутки, а не та, что у браузера.

Скриншот для этого:

http://jsfiddle.net/afzaal_ahmad_zeeshan/aNRE9/2/

Мне очень жаль, но я не стал менять фон, но вы можете видеть, заголовок остается там, нижний колонтитул в конце и свитки div! :)

Удачи!

Для этого, к сожалению, вам понадобится JavaScript. Ничего страшного. Я также добавил обработчик, когда вы изменяете размер окна.

var resizeTimer;
window.onload = function(){
    makeMiddleFull();
}

window.onresize = function(){
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(makeMiddleFull, 100);
}
function makeMiddleFull(){
    var cobj = document.getElementById('content');
    cobj.style.height = (getDocHeight() - (document.getElementById('header').style.height + document.getElementById('footer').style.height)) + "px";
}
function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

См. Обновленную скрипту для полного обновления кода, включая DOM и CSS: http://jsfiddle.net/Qpc2s/2/