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％就可以了。

make position：fixed DIV适合其父容器而不需要javascript

1 个答案: