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:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
margin: 0;
}
div.container {
display: flex; /* <---------------- required */
}
div.list {
flex: 1; /* <---------------------- required */
background: white;
}
div.details-container {
flex: 1;
display: flex; /* <---------------- required */
flex-direction: column; /* <------- required */
}
div.details-spacer {
flex: 1; /* <---------------------- required */
}
div.details-content {
position: -webkit-sticky; /* <----- required (for WebKit) */
position: sticky; /* <------------- required */
bottom: 0; /* <-------------------- required */
flex: none; /* <------------------- required */
min-height: 100vh; /* <------------ required */
background: silver;
}
</style>
</head>
<body>
<div class="container">
<div class="list">
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
</div>
<div class="details-container">
<div class="details-spacer"></div>
<div class="details-content">
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>
</div>
</div>
</div>
</body>
</html>
Example 2:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
margin: 0;
max-height: 300px;
}
div.container {
/* nothing here ... */
}
div.list {
margin: 0 50% 0 0; /* <------------ required */
}
div.details {
margin: 0 0 0 50%; /* <------------ required */
position: -webkit-sticky; /* <----- required (for WebKit) */
position: sticky; /* <------------- required */
bottom: 0; /* <-------------------- required */
background: silver;
min-height: 100vh; /* <------------ required */
}
</style>
</head>
<body>
<div style="container">
<div class="list"> <!-- <--------------- list must be placed as first -->
<!-- -->
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br /> Item ...<br />
</div>
<div class="details"> <!-- ----------- details must be placed as last -->
<!-- -->
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>
Details ...<br> Details ...<br> Details ...<br> Details ...<br> Details ...<br>
</div>
</div>
</body>
</html>