CODEWITHSUNDEEP
htmlcss
Rajan Lagah
Rajan Lagah

Reputation: 2528

Percentage inside div container with fixed position is not working

Now the issue is .side-bar-red is taking 95% of the total window not 95% of the black sidebar. What is wrong here? How to fix?

.side-fixed {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
}

.side-bar-black {
  width: 60%;
  height: 100vh;
  max-width: 480px;
  min-width: 320px;
  background-color: #333;
}

.side-bar-red {
  background-color: red;
  height: 100vh;
  width: 95%;
}
<div class="side-fixed side-bar-black ">
  <div class="side-fixed side-bar-red ">
    something...
  </div>
</div>

Upvotes: 0

Views: 34

Answers (1)

tacoshy
tacoshy

Reputation: 13010

position: fixed moves an element out of the normal flow. So both elements are threaten as single stand alone elements. Remove side-fixed-class from the side-bar-red-element:

.side-fixed {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
}

.side-bar-black {
  width: 60%;
  height: 100vh;
  max-width: 480px;
  min-width: 320px;
  background-color: #333;
}

.side-bar-red {
  background-color: red;
  height: 100vh;
  width: 95%;
}
<div class="side-fixed side-bar-black ">
  <div class="side-bar-red ">
    something...
  </div>
</div>

Upvotes: 3

Related Questions