Languages
[Edit]
EN

CSS - sticky list details on the right side

12 points
Created by:
AnnLen
13390

In this short article we would like to show how to create using only pure CSS, 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>

 

CSS

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join