EN
CSS - sticky list details on the right side
12 points
In this short article, we would like to show how to create using only pure CSS, a list with sticky details that are always visible and scrollable with the web page.
Simple example:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
margin: 0;8
}9
10
div.container {11
display: flex; /* <---------------- required */12
}13
14
div.list {15
flex: 1; /* <---------------------- required */16
background: white;17
}18
19
div.details-container {20
flex: 1;21
display: flex; /* <---------------- required */22
flex-direction: column; /* <------- required */23
}24
25
div.details-spacer {26
flex: 1; /* <---------------------- required */27
}28
29
div.details-content {30
position: sticky; /* <----- required (for WebKit) */31
position: sticky; /* <------------- required */32
bottom: 0; /* <-------------------- required */33
flex: none; /* <------------------- required */34
min-height: 100vh; /* <------------ required */35
background: silver;36
}37
38
</style>39
</head>40
<body>41
<div class="container">42
<div class="list">43
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />44
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />45
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />46
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />47
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />48
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />49
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />50
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />51
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />52
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />53
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />54
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />55
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />56
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />57
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />58
</div>59
<div class="details-container">60
<div class="details-spacer"></div>61
<div class="details-content">62
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>63
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>64
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>65
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>66
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>67
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>68
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>69
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>70
</div>71
</div>72
</div>73
</body>74
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
margin: 0;8
max-height: 300px;9
}10
11
div.container {12
/* nothing here ... */13
}14
15
div.list {16
margin: 0 50% 0 0; /* <------------ required */17
}18
19
div.details {20
margin: 0 0 0 50%; /* <------------ required */21
position: sticky; /* <----- required (for WebKit) */22
position: sticky; /* <------------- required */23
bottom: 0; /* <-------------------- required */24
background: silver;25
min-height: 100vh; /* <------------ required */26
}27
28
</style>29
</head>30
<body>31
<div style="container">32
<div class="list"> <!-- <--------------- list must be placed as first -->33
<!-- -->34
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />35
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />36
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />37
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />38
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />39
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />40
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />41
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />42
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />43
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />44
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />45
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />46
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />47
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />48
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />49
</div>50
<div class="details"> <!-- ----------- details must be placed as last -->51
<!-- -->52
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>53
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>54
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>55
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>56
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>57
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>58
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>59
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>60
</div>61
</div>62
</body>63
</html>
