javascript - Layout with sticky sidebar on the left and scrollable content on the right - Stack Overflow

admin管理员组

文章数量:1426797

How do I make a two column layout, where the left column is my menu and is locked (sticky? fixed?) so when you scroll vertically depending on the content height in the right column, the menu stays.

Second thing, I guess i have to use javascript for (vanilla, no jquery) is so make the columns resizable. with the css I would use 'cursor: col-resize' but the JS i have no clue.

.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>

How do I make a two column layout, where the left column is my menu and is locked (sticky? fixed?) so when you scroll vertically depending on the content height in the right column, the menu stays.

Second thing, I guess i have to use javascript for (vanilla, no jquery) is so make the columns resizable. with the css I would use 'cursor: col-resize' but the JS i have no clue.

.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>

Here is a fiddle: https://jsfiddle/ojx1g64s/

• javascript
• html
• css
• flexbox

Share Improve this question Follow edited Mar 26, 2022 at 13:57 Youssouf Oumar 46.7k1616 gold badges103103 silver badges105105 bronze badges asked Mar 26, 2022 at 13:38 JasonJason 42366 silver badges1616 bronze badges 2

• Please add the code right in the question itself, not on an external site. – connexo Commented Mar 26, 2022 at 13:41
• 1 maybe this codepen will help you -> codepen.io/pablowbk/pen/bGbxZoz – zgood Commented Mar 26, 2022 at 13:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You could use position:sticky. But in order to see a difference, set a smaller height on the sidebar.

Note: position: sticky wouldn't work if one of your sidebar's parent, even if it's not a direct one, have its overflow set to a different value than the default one, as this GitHub issue shows.

* {
  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>

You could do it like in my snippet below. Both columns have height: 100%;, the right one has overflow-y: auto to show a scrollbar only if necessary and scroll the contents inside that 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>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
    <p> Some contents in column 2 </p>
  </div>
</div>

本文标签： javascriptLayout with sticky sidebar on the left and scrollable content on the rightStack Overflow