Layout with sticky sidebar on the left and scrollable content on the right

user_632544 0
Viewed 1172

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.net/ojx1g64s/

flexbox css html javascript
2 Answers

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 sidebar's parent, even if it's not a direct one, have its overflow set to a different value than the default one.

.row {
  display: flex;
}
.column {
  flex: 50%;
  padding: 16px;
}
.one {
  background-color: tomato;
  position: sticky;
  top: 0;
  height: min-content;
}
.two {
  background-color: #33a8ff;
  height: 5000px;
}

html,
body {
  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>

user_152886410

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>

user_56416690
Related