Вопрос по css, html – как сделать высоту DIV 100% между верхним и нижним колонтитулом
Есть ли способ настроить макет так, чтобы заголовок был 50px, тело - 100%, а нижний колонтитул - 50px?
Я хотел бы, чтобы тело использовало всю область просмотра как минимум. Я хотел бы, чтобы нижний колонтитул и заголовок были на экране все время
* При ее решении у вас возникнут проблемы, если содержимое будет больше доступной области окна.
что вы ищете "множественные абсолютные координаты". У 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 показывает технику красивее.
ОБНОВЛЕНО 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% + 140px отступов. С рамкой границы высота содержимого будет 100%, а отступ будет внутри.
box-sizing: border-box; не имеет никакого значения.
Похожие вопросы
