设置固定块相对于父div（容器）的宽度

Question

我有一个container，其中有一个position:fixed块。我需要这个块的宽度是容器大小的40％ 问题是，当您将position:fixed应用于某个块时，宽度不再相对于父级，而是相对于屏幕大小。

我无法通过percent或px解决此问题，因为它会在某些设备上制作布局。

我正在使用Twitter-Bootstrap的容器类

Answer 1

您可以使用width: inherit;继承父div的宽度。

在这个例子中，我创建了一个具有固定位置并继承其父级宽度的容器。在这个固定的容器内，还有另一个具有固定容器宽度40％的div。

＆＃13;

＆＃13;

.container {
  width: 400px;
  height: 40px;
  background-color: #0000ff;
}

.container-fixed {
  position: fixed;
  height: 30px;
  width: inherit;
  background-color: #ff0000;
}

.container-fixed-inner {
  width: 40%;
  height: 20px;
  background-color: #00ff00;
}

＆＃13;

<div class="container">
  <div class="container-fixed">
    <div class="container-fixed-inner">
      <span>Some text</span>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;