Source Code:
(back to article)
Submit
Result:
Report an issue
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
html
,
body
{
height:
100
%
;
margin:
0
;
}
.
content
{
min-height:
100
%
;
}
.
content-inside
{
padding:
20
px
;
padding-bottom:
50
px
;
}
.
footer
{
height:
50
px
;
margin-top:
-50
px
;
}
body
{
font:
16
px
Sans-Serif
;
}
h1
{
margin:
0
0
20
px
0
;
}
p
{
margin:
20
px
0
0
0
;
}
footer
{
background:
#42A5F5
;
color:
white
;
line-height:
50
px
;
padding:
0
20
px
;
}
</
style
>
<!DOCTYPE html> <html> <head> <style> html, body { height: 100%; margin: 0; } .content { min-height: 100%; } .content-inside { padding: 20px; padding-bottom: 50px; } .footer { height: 50px; margin-top: -50px; } body { font: 16px Sans-Serif; } h1 { margin: 0 0 20px 0; } p { margin: 20px 0 0 0; } footer { background: #42A5F5; color: white; line-height: 50px; padding: 0 20px; } </style> </head> <body> <div class="content"> <div class="content-inside"> <h1>Sticky Footer</h1> <p>Example</p> </div> </div> <footer class="footer"> Footer </footer> </body> </html>