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

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

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

источник

2012-04-19 Arcadian

http://stackoverflow.com/questions/6158975/css-100-height-layout – Samich

Какое поведение вы хотите, если содержимое в теле переполнило высоту экрана? – bendataclear

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

Без пограничного блока будет отображаться информация ght 100% + 140px дополнение. При пограничном поле высота содержимого будет 100%, а заполнение будет внутри.

источник

2012-04-19 12:56:38 WolvDev

Было бы неплохо [включить код здесь] (http://stackoverflow.com/a/12907900/1269037) в случае, если JSFiddle недоступен. BTW, 'box-sizing: border-box;', похоже, не имеет никакого значения. –

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

Это не работает при прокрутке, нижний колонтитул прокручивается с содержимым. – Roaders

Только исправление для Andreas Winter решения:

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

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

источник

2012-04-19 13:17:44

Спасибо за это - я боролся с фиксированным верхним и нижним колонтитулом с прокручиваемой центральной площадью 100%. Это идеальный вариант, теперь у вас есть макеты EPIC !!!^__^ – Jason

yayyyyyyy, im рад помочь вам: 3 –

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

источник

2012-10-16 05:12:00

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

ответ

Смежные вопросы