How to set left side panel 100% height in CSS?-CodePudding

This is my CSS

.header {
  overflow: hidden;
  height: 60px;
  background: #292940;
  color: #fff;
}

.container {
  flex: 1;
  display: flex;
}

.sidenav {
  width: 15%;
  background-color: white;
}

@media (max-width: 640px) {
  .sidenav {
      display: none;
  }
}

.main {
  background-color: #f4f6f8;
  padding: 20px 30px;
  flex: 1 1 100px;
  order: 1;
  width: 85%;
}

@media (max-width: 640px) {
  .main {
    margin-left: 0;
    padding: 10px;
  }
}

This is working fine if have more content. But not able to 100% if right side content is less. Left side panel height automatically changing based on right side content

If I set height height: 100vh;

.sidenav {
  width: 15%;
  height: 100vh;
  background-color: white;
}

This what showing. Not 100% height

How to fix this issue? Thanks in advance

CodePudding user response：

Please try:

.sidenav {
 height: 100%;
 position: fixed;
}

CodePudding user response：

Just set your side panel height to the DOM 100% height.

.sidenav {
  width: 15%;
  height: 100vh;
  background-color: white;
}

If you want your sidenav to on the side when you scroll then set its position to fixed

.sidenav {
  width: 15%;
  height: 100vh;
  position: fixed;
  background-color: white;
}