Я хочу разместить нижний колонтитул в нижней части страницы, который также имеет фиксированный заголовок...
-
Не с
position: fixed
- я не хочу, чтобы он оставался на экране, он должен быть только в конце страницы и вести себя нормально при прокрутке. -
Не в нижней части видимого экрана. В нижней части страницы , т.е. после всего остального содержимого.
Вот диаграмма, которая лучше объясняет:
Здесь код:
- Я подготовил демо: JSFiddle
- Или см. ниже
<div id="header">Header</div>
<div id="content">
<p>Some content...</p>
</div>
<div id="footer">Footer</div>
body{
/* Just to enable scrolling in JSFiddle */
height: 1000px;
}
#header{
width: 100%;
height: 100px;
position: fixed;
top: 0px;
z-index: 1;
}
#content{
width: 100%;
position: absolute;
top: 100px; /*Height of header*/
z-index: 0;
}
#footer{
width: 100%;
height: 100px;
position: absolute;
bottom: 0px;
}
/*For demo only*/
#header, #footer{
border: 3px dashed #333333;
background: #FFFFFF;
}
#content{
background: #CCCCCC;
height: 200px;
}