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

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

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


html css css-position sticky-footer
person Arcadian    schedule 19.04.2012    source источник
comment
stackoverflow.com/questions/6158975/css-100-height-layout   -  person Samich    schedule 19.04.2012
comment
Какое поведение вы бы хотели, если бы содержимое в теле превышало высоту экрана?   -  person bendataclear    schedule 19.04.2012

Ответы (3)


arrow_upward
18
arrow_downward

Я создал пример в 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;
}

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

person WolvDev    schedule 19.04.2012
comment
Было бы неплохо включить сюда некоторый код на случай, если JSFiddle недоступен. Кстати, box-sizing: border-box;, похоже, не имеет никакого значения. - person Dan Dascalescu; 16.10.2012
comment
Без рамки содержимое будет иметь высоту 100% + отступ 140 пикселей. С рамкой высота содержимого будет 100%, а отступы будут внутри. - person WolvDev; 16.10.2012
comment
Это не работает при прокрутке, нижний колонтитул прокручивается вместе с содержимым. - person Roaders; 20.01.2016
comment
Не очень хороший пример, он просто прокручивается за нижний колонтитул! - person Roger Far; 15.04.2016

arrow_upward
4
arrow_downward

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

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

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

person Oswaldo Acauan    schedule 19.04.2012
comment
Спасибо за это - я боролся с фиксированным верхним и нижним колонтитулом с прокручиваемой 100% центральной областью. Это идеально, теперь могут быть ЭПИЧЕСКИЕ макеты !!! ^__^ - person Jason; 26.05.2013
comment
ууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу - person Oswaldo Acauan; 27.05.2013

arrow_upward
3
arrow_downward

Я думаю, что вы ищете "несколько абсолютных координат". В List Apart есть объяснение здесь, но в основном вам просто нужно указать положение тела как абсолютное и установите 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 показывает технику в более красивый способ.

person Dan Dascalescu    schedule 16.10.2012