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

Answer 2

正如@jaunt所说，使用width: 100vh可以解决问题，因为它会考虑视口高度来为进度分配宽度。您可以在下面找到支持此功能的浏览器列表：

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

css旋转后占据全高的元素

2 个答案: