EN
CSS - bottom sticky position for div element
10 points
In this short article we would like to show how to use sticky bottom positioning with pure CSS.
Note: to see better description how sticky works and how to use
toppositioning read this article.
Simple example:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
max-height: 300px;8
}9
10
div.content {11
border: 1px solid orange;12
height: 1000px;13
}14
15
div.footer {16
position: sticky; /* <----- required (for WebKit) */17
position: sticky; /* <------------- required */18
bottom: 10px; /* <----------------- required */19
border: 1px solid red;20
background: silver;21
}22
23
</style>24
</head>25
<body>26
<div>27
<div class="content">28
Some text here...<br />29
Some text here...<br />30
Some text here...<br />31
Some text here...<br />32
</div>33
<div class="footer">Footer 1</div>34
</div>35
<p>Some text here...</p>36
<p>Some text here...</p>37
<p>Some text here...</p>38
</body>39
</html>
