Question

我正在尝试使用播放按钮，进度条和停止按钮创建音频播放器。我希望它固定在页面底部。

为此，我有以下CSS：

.player-container {
    height: 100px; 
    background-color: #505050; 
    position: fixed;
    bottom: 0;
    width: inherit;
}

现在，奇怪的是，宽度会发生什么。播放器容器包含在Bootstrap容器中。它通常从正确的位置开始，但是根据浏览器的宽度，它看起来很小 - 或者似乎是正常的长度，加上填充的大小，这真的很奇怪。

这是HTML：

<div class="container">
  <div class="test"></div>
  <div class="player-container" ng-show="showPlayer" ng-controller="PlayerController">
    <span class="glyphicon glyphicon-play music-control"></span>
      <div class="seekBase" seek-track></div>
    <span class="glyphicon glyphicon-stop music-control" stop-music ng-click="stopClicked()"></span>
  </div>
</div>

我已经创建了一个plnkr来显示正在发生的事情，具有不同的颜色背景以使其非常清晰： http://plnkr.co/edit/MU4aK6Wf4UUmQh4egqU7

＆＃39;位置：固定＆＃39;导致这一切变得疯狂？明信片上的想法......

Answer 1

inherit关键字将指定值和计算值设置为父元素上相同属性的计算值。

问题在于，引导程序可能会根据浏览器的宽度（使用width .container查询）将一些min-width设置为父@media。

当浏览器较窄时，父.container没有width的级联值。因此，由于width不是继承的属性，因此指定的值为auto。对于width，auto计算为auto。然后，inherit使.player-container也有auto width。在这种情况下，width: inherit不会影响.player-container。

如果您在浏览器不窄时需要此行为，请移除width: inherit并将其设为auto。

但是，当浏览器较宽时，.container的宽度可能为750px，970px或1170px。在这种情况下，.player-container将继承相同的宽度。

如果在浏览器较窄时需要此行为，请使用width: 100%。

Div宽度继续奇怪地固定位置

1 个答案: