CODEWITHSUNDEEP
css
Piamio
Piamio

Reputation: 27

vertical progress bar starts from top when it should start on the bottom

I'm trying to build a vertical progress bar. But when change the "height" value on the orange bar, the bar rises from the top to the bottom. I want the bar to rise from the bottom to the top. Upside down. Does anyone know, how to achieve that?

.vertical-progress-bar {
  height: 200px;
  width: 40px;
  border: 1px solid black;
}

.vertical-progress {
  height: 100px;
  width: 40px;
  background-color: orange;
}
<div class="vertical-progress-bar">
  <div class="vertical-progress">
  </div>
</div>

Upvotes: 0

Views: 343

Answers (1)

A Haworth
A Haworth

Reputation: 36457

One way is to position the inner div so its bottom is on the bottom of its parent.

Note: the parent needs to be given a position too else the child will position according to its nearest ancestor which has a position.

.vertical-progress-bar {
  height: 200px;
  width: 40px;
  border: 1px solid black;
  position: relative;
}

.vertical-progress {
  height: 100px;
  width: 40px;
  background-color: orange;
  position: absolute;
  bottom: 0;
}
<div class="vertical-progress-bar">
  <div class="vertical-progress">
  </div>
</div>

Upvotes: 1

Related Questions