html - 元素在 css 旋转后占据全高

Question

我正在尝试使用 CSS 转换创建垂直进度条。我希望进度条占据整个屏幕的高度。

问题是，由于我使用 CSS 旋转，进度条的高度等于屏幕的宽度，而不是它的高度。我创建了一个 fiddle为了证明这一点:进度条的长度将根据您制作“结果”部分的宽度而改变。这是不正确的:它应该始终占据整个屏幕。这是代码:

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;  
}

由于是进度条，它的大小不能大于屏幕高度，否则进度指示会关闭。我看过 this解决方案，但这对我不起作用，因为屏幕尺寸可以随时更改(例如，在平板电脑上的纵向和横向之间切换)，因此 JavaScript 解决方案不起作用。

有没有办法仅使用 CSS 强制进度条占据屏幕的整个高度？任何其他不使用旋转来创建垂直进度条的解决方案也很棒!

Answer 1

我不太清楚你的意思，不过请尝试将 width:100% 替换为 width:100vh;。