設置固定塊相對於父div（容器）的寬度

Question

我有一個container，其中我有一個position:fixed塊。我需要這個塊的寬度是容器大小的40％。
問題是，當您將position:fixed應用於塊時，寬度不再相對於父級，而是相對於屏幕大小。

我無法修復此問題percent或px，因爲它會制動一些設備上的佈局。

我使用Twitter的引導的容器類

Answer 1

您可以使用width: inherit;繼承父div的寬度。

在這個例子中，我創建了一個具有固定位置並繼承其父項寬度的容器。在這個固定容器內還有另一個div，固定容器寬度爲40％。

.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; 
 
}

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