Design featuring fixed sidebar on the left side and scrollable main content on the right side

Question

Design featuring fixed sidebar on the left side and scrollable main content on the right side

Is there a way to create a two column layout with a locked (sticky? fixed?) left menu that stays in place as you scroll through the content on the right side?

Additionally, I believe I will need to use JavaScript (without jQuery) to make the columns resizable. While using CSS for 'cursor: col-resize' seems straightforward, I have no idea how to approach this in JS.

.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 16px;
}

.one {
  background-color: tomato;
  min-height: 100%;
}

.two {
  background-color: #33a8ff;
  height: 5000px;
}

html,
body {
  height: 100%;
  margin: 0;
}

<div class="row">
  <div class="column one">
    <h2> column #1 </h2>
    <p>menu items</p>
  </div>
  <div class="column two">
    <h2>column #2</h2>
    <p> Some contents in column 2 </p>
  </div>
</div>

You can access an example on jsFiddle here:

https://jsfiddle.net/ojx1g64s/

javascript html css flexbox

Answer 1

Answer №1

If you want to make a sidebar sticky, try using the CSS property position:sticky. To ensure it works properly, consider adjusting the height of the sidebar element.

Keep in mind that position: sticky may not function correctly if any parent elements of the sidebar have their overflow property set differently than default. More information on this can be found in this GitHub issue.

* {
  margin: 0;
}

.row {
  display: flex;
}

.column {
  padding: 16px;
}

.sidebar {
  background-color: tomato;
  position: sticky;
  top: 0;
  height: min-content;
  flex:1;
}

.content {
  background-color: #33a8ff;
  height: 100vh;
  flex:2;
}

.bottom{
  background-color: lightblue;
  padding: 16px;
  height: 120vh;
}

<div class="row">
  <div class="column sidebar">
    <h2>Sticky Sidebar</h2>
    <p>Menu items.</p>
  </div>
  <div class="column content">
    <h2>Content</h2>
    <p> Some scrollable content.</p>
  </div>
</div>
<div class="bottom">
  <h2>Content On the bottom</h2>
  <p>Some content outside of the block with the sticky sidebar.</p>
</div>

Answer 2

If you want to make a sidebar sticky, try using the CSS property position:sticky. To ensure it works properly, consider adjusting the height of the sidebar element.

Keep in mind that position: sticky may not function correctly if any parent elements of the sidebar have their overflow property set differently than default. More information on this can be found in this GitHub issue.

* {
  margin: 0;
}

.row {
  display: flex;
}

.column {
  padding: 16px;
}

.sidebar {
  background-color: tomato;
  position: sticky;
  top: 0;
  height: min-content;
  flex:1;
}

.content {
  background-color: #33a8ff;
  height: 100vh;
  flex:2;
}

.bottom{
  background-color: lightblue;
  padding: 16px;
  height: 120vh;
}

<div class="row">
  <div class="column sidebar">
    <h2>Sticky Sidebar</h2>
    <p>Menu items.</p>
  </div>
  <div class="column content">
    <h2>Content</h2>
    <p> Some scrollable content.</p>
  </div>
</div>
<div class="bottom">
  <h2>Content On the bottom</h2>
  <p>Some content outside of the block with the sticky sidebar.</p>
</div>

Answer 3

Answer №2

If you want to achieve the layout similar to what I have in my code snippet below, you can implement it this way. In this design, both columns are set with a height of 100%. The right column is configured with overflow-y: auto so that a scrollbar will only appear when needed to scroll the contents inside that specific column:

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
.row {
  display: flex;
  height: 100%;
  background-color: #33a8ff;
}

.column {
  flex: 50%;
  padding: 16px;
}

.one {
  background-color: tomato;
  height: 100%;
}

.two {
  height: 100%;
  overflow-y: auto;
}

<div class="row">
  <div class="column one">
    <h2> column #1 </h2>
    <p>menu items</p>
  </div>
  <div class="column two">
    <h2>column #2</h2>
    <p> Some contents in column 2 </p>
     ... (additional content for column 2)
  </div>
</div>

Answer 4

If you want to achieve the layout similar to what I have in my code snippet below, you can implement it this way. In this design, both columns are set with a height of 100%. The right column is configured with overflow-y: auto so that a scrollbar will only appear when needed to scroll the contents inside that specific column:

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
.row {
  display: flex;
  height: 100%;
  background-color: #33a8ff;
}

.column {
  flex: 50%;
  padding: 16px;
}

.one {
  background-color: tomato;
  height: 100%;
}

.two {
  height: 100%;
  overflow-y: auto;
}

<div class="row">
  <div class="column one">
    <h2> column #1 </h2>
    <p>menu items</p>
  </div>
  <div class="column two">
    <h2>column #2</h2>
    <p> Some contents in column 2 </p>
     ... (additional content for column 2)
  </div>
</div>

Design featuring fixed sidebar on the left side and scrollable main content on the right side

Answer №1

Answer №2

Similar questions

Do AJAX requests make Cross-site scripting attacks more significant?

How can I execute a task following a callback function in node.js?

The :not selector in a chained condition is not functioning properly for a child div

Is it possible to upload several files using multer?

Get all the classes from the body element of the AJAX-loaded page and update the body classes on the current page with them

background covering the entire span

Creating a fresh JSON structure by utilizing an established one

Implement handleTextChange into React Native Elements custom search bar component

The Date_Format field in the JSON-Data is not displaying

Using Scale Transformation on SVG Element Group

Guide to declaring variables using jQuery

What is the functioning of property as a method?

Show the helper text when a TextField is selected in Material UI

Moving route.param() calls outside of Express.js

Instructions for implementing a jump event with Javascript on Wordpress

The dropdown feature within a bootstrap button group is malfunctioning

The alterations made to a single dropdown option are causing ripple effects across all other dropdowns

inventory items - 6 articles listed in the initial column

Utilizing dynamic attributes within the CSS styling function

Searching for an AngularJS and Bootstrap Dual Listbox Solution