CSS Липкий верхний/нижний колонтитул и полностью растянутая средняя область?

Можно использовать абсолютную позицию для всех трех элементов.

#header,#footer,#content { position:absolute; right:0;left:0}

#header{
   height:100px; top:0;
}
#footer{
  height:100px; bottom:0;
}
#content{
  top:100px;
  bottom:100px;
  overflow:hidden; /* use this if don't want any window scrollbars and use an inner element for scrolling*/
}

ДЕМО: http://jsfiddle.net/RkX8B/

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

Однако почти все решения полностью разваливаются, если вы просто добавляете границы, поля и/или отступы к любому или ко всем вашим элементам Div.

Flex Boxes (CSS display:flex;) невероятно эффективны для этого, и они отлично работают с любой комбинацией границ, полей и/или отступов.

Они могут разделить ваше экранное пространство на столько Div, сколько вам нужно, используя фиксированный размер, размер в процентах или «все, что осталось» для каждого внутреннего Div. Они могут быть в любом порядке, поэтому вы не ограничены только верхними и/или нижними колонтитулами. Их также можно использовать горизонтально, а не вертикально, а можно рядом.

Таким образом, у вас может быть, скажем, заголовок фиксированного размера, нижний колонтитул размером 20% и клиентская область «все, что осталось» между ними, размер которой изменяется динамически. Внутри этой клиентской области, в свою очередь, вы можете иметь, скажем, полосу меню процентной ширины на левом краю клиентской области, вертикальный разделитель фиксированной ширины рядом с ней и клиентскую область, которая занимает «все, что осталось». справа от этого.

Вот Fiddle, чтобы продемонстрировать все это. Соответствующий CSS удивительно прост. Демонстрация CSS Flex Box (display:flex;) с границами/полями/отступами

Например, вот два класса CSS, которые создают контейнеры, которые будут перемещать содержащиеся в них элементы Div горизонтально или вертикально соответственно:

.HorFlexContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1; /* this essentially means "use all parent's inner width */
}
.VertFlexContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex: 1; /* this essentially means "use all parent's inner height */
} 

Однако Fiddle выше действительно показывает все это.

Для справки см. эту прекрасную статью Криса Койера: Flexbox Tutorial

Надеюсь, это все поможет!

Вы, вероятно, ищете «позиция: фиксированная;» свойство и установка заголовка top: 0; и нижний колонтитул вниз: 0; Вы также можете подумать о некотором дополнении к своей «области содержимого», чтобы учесть это пространство верхнего и нижнего колонтитула...

С моей точки зрения у вас было бы что-то вроде:

header { position: fixed; top: 0; height: 100px; }
footer { position: fixed; bottom: 0; height: 100px; } 
#container {  padding: 100px 0; }

Если вы используете какой-то фон в своем контейнере и хотите его растянуть, высота: 100%; стоит сделать...

Однако я так и не нашел хорошего способа использовать такой макет... =\