Breaking News: Grepper is joining You.com. Read the official announcement!

fixed sidebar with scrolling content

YOU.com answered on March 17, 2022 Popularity 7/10 Helpfulness 2/10

answer fixed sidebar with scrolling content

related sidebar fixed when scrolling down css

fixed sidebar with scrolling content

Comment

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* CSS to fix the sidebar to the left side of the screen */
      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 200px;
        height: 100vh; /* Set sidebar height to fill the entire viewport */
        background-color: #f0f0f0;
        overflow-y: auto; /* Enable vertical scrolling if sidebar content exceeds viewport height */
      }
      
      /* CSS to create content area with scrolling */
      .content {
        margin-left: 200px; /* Adjust this value to match the sidebar width */
        /* Additional styling for the content area */
      }
    </style>
  </head>
  <body>
    <div class="sidebar">
      <!-- Sidebar content goes here -->
    </div>
    <div class="content">
      <!-- Main content goes here -->
      <!-- Add more content to make the scrollbar appear and scrollable -->
    </div>
  </body>
</html>

Popularity 7/10 Helpfulness 2/10 Language html

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

Closely Related Answers

sidebar fixed when scrolling down css

Comment

.sidebar{
   position: sticky;
   top: 0;
}

Popularity 9/10 Helpfulness 7/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Mar 17 2022

Wissam

0 Answers Avg Quality 2/10

fixed sidebar with scrolling content

Contents

More Related Answers

fixed sidebar with scrolling content

Closely Related Answers

sidebar fixed when scrolling down css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.