html - 固定标题和固定右滚动条

Question

我正在处理我想使用的脚本标题固定和固定右滚动条，就像 Facebook 一样。但我希望右侧的 div 不固定。我位置固定这次 div 向左移动。

我希望它固定在黑色 div.Header 的右侧，它有 height: 40px;

这是 JSfiddle 中的演示

这是我的HTML代码:

<div class="globalHeader"><div class="globalHader-in"></div></div>
<div class="global_container"><div class="container">
    <div class="ksmsl"></div>
    <div class="ksmort"></div>
    <div class="ksmsg"></div>


</div></div>

还有CSS代码:

body{
   margin:0px;
    padding:0px;

}
.globalHeader {
    width:100%;
    height:40px;
    position:fixed;
    background-color:#2a3542;
    z-index:99999;
    }
.globalheader-in {
    width:981px;
    height:40px;
    margin-left:auto;
    margin-right:auto;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
    }
.global_container{
    clear:both;
    width:981px;
    height: 100000px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
    position:relative;
    top:40px;
    background-color:#f8f8f8;
    }
.container{
    float:left;
    width:981px;
    height:auto;

    }
.ksmsl{
    float:left;
    width:220px;
    height:auto;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;

    }
.ksmsg{
    float:right;
    width:199px;
    height:1000px;

    background-color:#000;
    }
.ksmort{
    float:left;
    width:560px;
    height:auto;
    border-left:1px solid #d8dbdf;
    border-right:1px solid #d8dbdf;
    border-bottom:1px solid #d8dbdf;
    }

Answer 1

修复你的侧边栏，而不是让它向右浮动，你说 right: 0; JS Fiddle

.ksmsg{
    margin-top: 40px;
    position: fixed;
    right: 0;
    width:199px;
    height:1000px;
    color: #fff;
    background-color:#000;
    }

至于将固定侧边栏保留在容器中，您不能包含固定的 div。请引用:Fixed position div not staying contained in wrapping div, overlays entire screen?