Nothing complicated, but we will need some little CSS tricks.
Let's start.
HTML part
The HTML part is very simple. In the body of our page, we just place three divs: one for the header, one for the footer and one for the content:<div class="header"> header </div>
<div class="content"> content</div>
<div class="footer"> footer</div>
Easy, isn't it? Let's see the CSS partCSS part
The rules for the above divs should be put in the head of your document. The first part is just generic:body {
font-family: Tahoma;
font-size: 12px;
color: #000000;
padding: 86px 0px 144px 0px;
margin: 15px;
}
@media screen{
body>div.footer{
position: fixed;
}
body>div.header{
position: fixed;
}
}
* html body{
overflow:hidden;
}
In the above code, what is to be noted is the padding rule for the body. The values are 86px, 0px, 144px and 0px. The important values are 86px for the header height, and 144px for the footer height.Now let's place some rules for the container div:
* html .container {
height:100%;
overflow:auto;
}
And then the header and the footer divs:.header {
width: 100%;
height: 36px;
padding-top: 20px;
padding-bottom: 20px;
position: absolute;
top: 0px;
left: 0px;
background:white;
text-align:center;
}
.footer {
bottom: 0px;
left: 0px;
text-align: center;
width: 100%;
position: absolute;
height: 72px;
background:white;
padding-top: 20px;
}
Those two parts place the header and footer (absolute positioned) at the top and at the bottom of our page.We can play with heights, paddings and margins of the divs, and change the padding of the body as well, in order to find a desired solution.
Important: the background of the header and the footer must be set, in order to make the content go under them.
And that is all for today: enjoy!
Aucun commentaire:
Enregistrer un commentaire