100% Css-макет с верхним и нижним колонтитулами

Question

Я пытаюсь создать макет с верхним и нижним колонтитулом (оба из которых имеют фиксированную высоту) и содержимым div между ними, который заполняет оставшееся пространство.Внутри content-div я хочу иметь div с высотой, основанной на процентах (с heihgt content-div в качестве родителя).Я не могу понять, как это сделать?

Вот иллюстрация того, чего я пытаюсь достичь. пример макета http://img22.imageshack.us/img22/45/layoutbz.png

Answer 1

[ увидеть его в действии ]

  #header { 
    position:absolute; 
    height: 50px; 
    left:0; 
    top:0; 
    width:100%; 
    background:green;
  }

  #footer { 
    position:absolute; 
    height: 50px; 
    left:0; 
    bottom:0; 
    width:100%;
    background:green;
  }

  #content { 
    position: absolute; 
    top:50px; 
    bottom:50px; 
    left:0;
    width:100%;
    background:#eee; 
  }

  #box1 { 
    height:50%; 
    width:30%; 
    float:left; 
    background:red; 
  }

Answer 2

.header {
  position: absolute;
  height: 50px;
  left: 0;
  top: 0;
  right: 0;
}

.footer {
  position: absolute;
  height: 50px;
  left: 0;
  bottom: 0;
  right: 0;
}

.content {
  position: absolute
  top: 50px;
  left: 0px;
  right: 0px;
  bottom: 50px;
}

.box1 {
  width: 30%;
  height: 50%;
}

Answer 3

Для решения, где нижний колонтитул прилипает к нижней части экрана или к нижней части содержимого (в зависимости от того, что дальше от верха), посмотрите «липкий нижний колонтитул» Райана Фейта.Это легкий и надежный набор CSS, и обычно это то, что вы хотите для своего макета.

http://ryanfait.com/sticky-footer/