Sidebar 100vh does not stretch-CodePudding

I use a sidebar with a height of 100vh. when the content becomes longer and it is necessary to scroll down, the sidebar does not extend along the page, but remains at the original height. How can I solve?

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  font-family: 'Roboto', sans- serif;
  box-sizing: border-box;
  min-height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

.container {
  height: 100%;
}

.sidebar {
  height: 100vh;
  background-color: #c7cdd1;
}

<div >
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

I solved the problem by setting the height to 100% with absolute position

CodePudding user response：

Explanation: (Read this carefully to understand code better!!!)

You have to assign the width property to the sidebar and the content first. I said content is going to have a width: 65%; property, and .sidebar is going to have a width: 35%; property. If their total widths are going to make 100% now they are not going to have space between them.

Then we have to use float property so they can be side by side. Otherwise, the sidebar will be under the content. So we have to do : .content{float: left;} and .sidebar{float: right;} Then they are completely divided by 35-65% and whatever you assign the containers height property they will keep extending by that. Hope I helped.

Check out the code below to understand the explanation carefully.

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  font-family: "Roboto", sans- serif;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background-color: black;
}

.container {
  height: 500px;
}
.content {
  background-color: pink;
  height: 500px;
  width: 60%;
  float: left;
  font-size: 50px;
}

.sidebar {
  background-color: blue;
  height: 500px;
  width: 40%;
  float: right;
  font-size: 50px;
}

<div >
  <div >This is sidebar</div>
  <div >This is content</div>
</div>