как сделать высоту DIV 100% между верхним и нижним колонтитулами

Есть ли способ настроить макет так, чтобы заголовок был 50px, тело-100%, а нижний колонтитул-50px?

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

3 15
html css css-position sticky-footer

3 ответа:

Я создал пример в jsfiddle:

Обновленный JsFiddle: http://jsfiddle.net/5V288/1025/

HTML: 

<body>
    <div id="header"></div>
    <div id="content"><div>
        Content 
    </div></div>
    <div id="footer"></div>
</body>

CSS: 

html { height: 100%; }
body {
    height:100%;
    min-height: 100%;
    background: #000000;
    color: #FFFFFF;
    position:relative;
}
#header {
    height:50px;
    width:100%;
    top:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#footer {
    height:50px;
    width:100%;
    bottom:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
    padding: 0 20px;
}
#content > div {
    padding: 70px 0;
}

Без border-box содержимое будет высотой 100% + 140px padding. С рамкой-коробкой высота содержимого будет 100%, а заполнение будет внутри.

14

Просто исправление для решения Andreas Winter:

Http://jsfiddle.net/5V288/7/

*при его решении у вас возникнут проблемы, если содержимое превышает доступную область окна.

4

Я думаю, что вы ищете "множественные абсолютные координаты". Список отдельно имеет объяснение здесь , но в основном, вам просто нужно указать положение тела как абсолютное и установить оба top: 50px и bottom: 50px: 

<body>
<style>
#header {
  position: absolute;
  height: 50px;
} 

#body {     
  position: absolute;
  top: 50px;
  bottom: 50px;
  background-color: yellow;
}

#footer {
  position:absolute;
  height: 50px;
   bottom: 0;
}
</style>
<div id="header">Header</div>
<div id="body">Content goes here</div>
<div id="footer">Footer</div>

Http://www.spookandpuff.com/examples/absoluteCoordinates.html показывает технику в более красивом виде.

3