固定位置会弄乱宽度

Question

我在div中有一个HTML5音频播放器。我已将其宽度设置为100％。我想在滚动时将播放器固定在顶部，所以我修正了它的位置。问题是当我这样做时，播放器宽度溢出容器。

以下是我的代码。

HTML

<div id="container">
    <audio arc="#" controls></audio>
</div>

CSS

#container {
    width : 350px;
    height: 300px;
    background: #BADA55;
}

audio {
    width: 100%;
    /*position: fixed;*/
}

我创建了一个fiddle来证明这个问题。它目前处于我想要的状态。取消评论position: fixed;以查看问题。

任何人都可以告诉我应该做些什么来让它以正确的宽度保持固定？

由于

Answer 1

您可以尝试使用

width:inherit;

http://jsfiddle.net/vfQ5K/2/

Answer 2

需要包装音频元素并将css应用于包装器。我更新了您的jsfiddle。

<div id="container">
  <div class="audioWrap">
    <audio arc="#" controls></audio>
  </div>
</div>

然后CSS：

#container {
  width : 350px;
  height: 300px;
  background: #BADA55;
  position: relative;
}

.audioWrap {
  width: 100%;
  position: fixed;
}

注意，如果要修复它在容器内的位置，您可能需要在容器中添加“position：relative”。我继续把它添加到jsfiddle。