How to force a div to top/bottom of viewport while not taking it out of document flow?

user_6398263 0
Viewed 50

I'm wondering how I can make the blue div 'stick' to the top and bottom of the page (so you can't scroll beyond it) without breaking the document flow (I don't want it to overlap the content div). A crude version is here in the code snippet. If I set 'absolute' on it, it breaks flow and the content goes under the menu. If I leave it relative, you can scroll beyond it (I want it to stay at top: 0, bottom: 0 for a full 100vh with its own scrolling).

Is there something that I'm missing?

* {
  box-sizing: border-box;
}

.main {
  display: flex;
  flex-direction: row;
  
}

.sideNav {
  width: 100px;
  height: 100vh;
  border: 5px solid red;
}

.sidePanel {
  width: 50px;
  height: 100vh;
  border: 5px solid blue;
}

.content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 200vh;
  margin: auto;
  width: auto;
  border: 5px solid green;
}
<div class="main">
  <div class="sideNav">Side Nav</div>
  <div class="content">This is the content area</div>
  <div class="sidePanel">Side Panel</div>
</div>

flexbox css-position css
1 Answers

You really can't do it without removing it from the document flow.

But if you know the width of the side panel, you can apply it as a right margin to the content div.

.main {
  display: flex;
  flex-direction: row;
}

.sideNav {
  width: 100px;
  height: 100vh;
  border: 5px solid red;
}

.sidePanel {
  width: 50px;
  height: 100vh;
  border: 5px solid blue;
  position: fixed;  /* new */
  right: 0; /* new */
}

.content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 200vh;
  margin: auto;
  width: auto;
  border: 5px solid green;
  margin-right: 50px;  /* new */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}
<div class="main">
  <div class="sideNav">Side Nav</div>
  <div class="content">This is the content area</div>
  <div class="sidePanel">Side Panel</div>
</div>

user_35972760
Related