css - 使位置 :fixed DIV fit its parent container without 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

fixed 的问题是它总是相对于浏览器窗口。因此，如果您在固定容器上设置 100% 高度，它将是浏览器窗口的 100%。

我能想到的唯一方法是使用 jQuery。或者，如果您不需要固定菜单并且它可以是绝对的，那么高度 100% 就可以了。