css - 将 1% 宽度的 div 放大 100 倍并不能覆盖父级的整个宽度

Question

我正在尝试制作一个进度条。

您可能认为宽度为 1% 的 div 水平放大 100 倍会跨越其父级的宽度，但事实并非如此。留缝的空间量取决于我的窗口大小，所以我认为这可能是浏览器中的舍入问题。我可以做些什么来完成这项工作吗？

我经常改变这个栏的进度，所以我不想每次都改变栏的宽度属性，因为那样会导致 performance issues .

body {
  margin: 0;
  padding: 0;
}
#container {
  background-color: red;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  padding: 0;
  margin: 0;
  height: 100px;
}
#progress {
  position: absolute;
  left: 0;
  top: : 0;
  width: 1%;
  height: 100%;
  background-color: yellow;
  transform: scale(100, 1);
  transform-origin: left top;
}

<div id="container">
  <div id="progress">
  </div>
</div>

我还做了一个codepen来演示这个问题:http://codepen.io/bigblind/pen/Zbozjv

Answer 1

The amount of space left seams to depend on my window size, so I think this might be a rounding issue in the browser.

是的。这是。

I don't want to change the bar's width property every time

我不想在这里讨论性能问题，而是想集中讨论如果不是 width 那么可以使用什么属性的问题？

好吧，你可以把你的进步倒过来。不是 #progress div 展开以显示进度，而是将其滑开以显示背景 #container div 以显示进度。使用 translate 滑动进度。

在下面的演示中，悬停鼠标以查看转换效果。

演示 fiddle :http://jsfiddle.net/abhitalks/y2o7yub9/1

演示片段:

* { box-sizing: border-box; padding: 0; margin: 0; }
html, body { width: 100%; }
#container{
    background-color: yellow; position: fixed;
    left: 0; right: 0; top: 0;
    height: 100px; width: 100%;
    overflow: hidden; white-space: nowrap;
}
#progress{
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: red;
    transform: translateX(0%); transition: transform 0.5s;
}
#container:hover > div { transform: translateX(100%); }

<div id="container">
  <div id="progress"></div>
</div>