CODEWITHSUNDEEP
htmlcss
fikkatra
fikkatra

Reputation: 5792

Element to take up full height after css rotate

I'm trying to create a vertical progress bar by using a CSS transform. I want the progress bar to take up the full height of the screen.

The problem is that, since I use CSS rotate, the progress bar's height is equal to the width of the screen, not its height. I created a fiddle to demonstrate this: the length of the progress bar will change depending on how wide you make the 'Result' section. This is incorrect: it should always take up the entire screen. Here's the code:

HTML:

<progress max="1" value="0.8"></progress>

CSS:

progress {
    margin: 0;
    height: 5px;
    width: 100%;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: bottom left;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: bottom left;

    /* Reset the default appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;  
}

As it's a progress bar, its size cannot be larger than the screen height, otherwise the progress indication will be off. I've looked at this solution but this won't work for me because screen dimensions can change at anytime (e.g. switching between portrait and landscape on a tablet), so a JavaScript solution won't do.

Is there a way to force the progress bar to take up the full height of the screen using just CSS? Any other solution to create a vertical progress bar without using rotations, would also be great!

Upvotes: 2

Views: 3145

Answers (2)

Javi Prieto
Javi Prieto

Reputation: 429

As @jaunt just said, using width: 100vh would do the trick, as it takes in consideration the viewport height to assign a width for the progress. Below you can find the list of browsers that support this:

http://caniuse.com/#feat=viewport-units

Upvotes: 0

jaunt
jaunt

Reputation: 5088

I'm not quite sure what you mean, however try replacing width:100%, with width:100vh;.

Upvotes: 4

Related Questions