使位置：固定DIV適合其父容器沒有JavaScript

Question

這是代碼。我希望DIV.fixed-nav（position：fixed）完全適合寬度可能改變的父DIV.container。有沒有一個純粹的CSS解決方案？

CSS：

body { 
    margin: 0; 
    padding: 0; 
} 

.container { 
    border: 1px solid #000000; 
    margin: 0 auto; 
    max-width: 600px; 
    min-width: 400px; 
} 

.fixed-nav { 
    background-color: red; 
    height: 20px; 
    position: fixed; 
    width: 100%; 
    top: 0; 
    z-index: 99; 
} 

.content { 
    background-color: green; 
    height: 100px; 
    margin-top: 20px; 
} 

HTML：

<div class="container"> 
    <div class="fixed-nav"> 
    </div> 
    <div class="content"> 
    </div> 
</div> 

請檢查DEMO。

Answer 1

固定的問題是，它總是相對於瀏覽器窗口。因此，如果您在固定容器上設置了100％的高度，它將會是瀏覽器窗口的100％。

我能想到的唯一方法就是使用jQuery。或者，如果你不需要菜單被固定，並且它可以是絕對的，那麼高度100％將起作用。