html - 将部分固定在浏览器窗口中

Question

我试图在滚动内容时将一个 div 固定到浏览器窗口，但我似乎无法让它工作。

这是我目前所做的事情:

HTML

<section id="adminpanel">
        <!--Drop down-->
        <!--Button-->
        <!--Drop down-->
        <!--Button-->
        <!--Drop down-->
        <!--Button-->
</section>
<!--This is the content section-->
<div class="content">
    <div id="accounts">
        <!--content-->
    </div>
    <div id="facilities">
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
</div>
<footer>
    <p>Copyright &copy</p>
</footer>

CSS

html, body {
    height:100%;
    min-height: 100%;
    background-color:grey;
    margin: 0;
    padding: 0;
    border: 0;
}

#adminpanel {
    line-height:30px;
    background-color:#eeeeee;
    height:100%;
    width:15%;
    float:left;
}
.content {
    position: relative;
    width:85%;
    min-height: 100%;
    float:left;
    background-color:silver;
    margin-bottom: 60px;
}
footer {
    text-align:center;
    position: fixed;
    padding:5px;
    left:0px;
    bottom:0px;
    width:100%;
    background: #999999;
}

这是一个 JSFiddle展示我目前所处的位置。

我已经尝试在 #adminpanel 上设置 position: fixed; 但这似乎把其他一切都搞砸了，我们将不胜感激。

Answer 1

https://jsfiddle.net/or9vkxuu/1/

#adminpanel {
    line-height:30px;
    background-color:#eeeeee;
    height:100%;
    width:15%;
    float:left;
    position:fixed;
}
.content {
    position: relative;
    width:85%;
    min-height: 100%;
    float:left;
    background-color:silver;
    margin-bottom: 60px;
    margin-left: 15%;
}

如果你把 position fixed 放在那个元素上，你需要在内容元素中添加相同宽度的 margin-left，因为 #adminpanel 不再堆叠。