Question

我有一个主要的div应该使页面可滚动。在这个div的两边有一个侧边栏。我想要的唯一区别是，侧边栏应始终保持在顶部（position: fixed;）

我已经尝试了一切，但它不起作用。如果我将position: fixed;放在.fixed上，则宽度不再是100％，而是内部实际内容的宽度。如果我穿上width: 100%宽度变为视口的100％。

只有CSS才能实现这一点吗？

边栏1

<div id="wrapper">
    <div class="contents">
        <p>Lorem ipsum dolor sit amnet.</p>
    </div>
</div>
<div class="sidebar">
    <div class="contents">
        <div class="fixed">
            Sidebar 2
        </div>
    </div>
</div>

html，body {margin：0;填充：0;}

#wrapper {
    width: 54%;
    float: left;
    background: #0FF;
}

.sidebar {
    width: 23%;
    float: left;
}
.sidebar .contents {
    margin: auto;
    background: #F00;
    min-width: 100px;
    width: 55%;
    height: 100px;
}

.sidebar .contents .fixed {
    background: #0F0;
}

Answer 1

诀窍是在侧栏上设置position:fixed（分别使用left:0和right:0），然后将margin-left:23%添加到#wrapper：

#wrapper {
    width: 54%;
    margin-left: 23%;
    background: #0FF;
}

.sidebar {
    width: 23%;
    position: fixed;
    left:0; top: 0;
}

#wrapper + .sidebar {  /* target second sidebar */
    left: inherit;     /* reset left */
    right:0;
}

如果你想让绿色侧边栏保持原位，但红色的边框要移开，那么这样的东西应该有效：

.sidebar {
    width: 23%;
    float: left;
    position: relative;   /* so sub-containers are relative to sidebar */
}
.sidebar .contents {
    margin: auto;
    background: #F00;
    min-width: 100px;
    width: 100%;          /* relative to sidebar */
    height: 100px;
}

.sidebar .contents .fixed {
    background: #0F0;
    position: fixed;      /*  starts a new context... */
    width: 23%;           /*  so this is not relative to sidebar *.
}

Answer 2

仅使用CSS无法实现。当您创建元素fixed时，它会将其从“上下文”中删除，并使其新的“上下文”成为文档。这就是为什么在width: 100%元素上指定position: fixed跨越页面。

编辑：我假设您希望绿色侧边栏保持原位，但滚动时红色框会移开（我正在做出这个假设，因为您在页面上命名了您的课程）

Answer 3

您需要修复 sidebar，而不是其内容。

只需删除float并将位置设置为顶部和右侧

  .sidebar {
        width: 30%;
        position: fixed;
        top:0;
        right:0;
    }

如何将固定div置于另一个div内？

3 个答案: