Question

我有一个包含以下内容的HTML页面 -

<div class="sidebar">
    Some content here....
</div>
<div class="content">
    content here too...
</div>

我希望.sidebar为position:fixed，但不是.content。这是我在CSS中尝试过的东西 -

*{box-sizing:border-box;} 
.sidebar{
   background:rgb(24, 33, 61);
   text-align: right;
   height: 100% !important;
   width:30%;
   postion:fixed;
   left:0px;
   top:0px;
   bottom:0;
   padding:1em;
   color:white;
 }
 .content{
    width:70%;
   font-size:1.1em;
   font-weight:normal;
   position: absolute;
   top:0;
   right:0;
   padding:2em;
 }

基本上，我想重现this。但是我现在看到的东西看起来很完美，但是当你向下滚动时，.sidebar不随你移动，它会停留在同一个地方。
Codepen demonstration

我怎样才能让它发挥作用？

Answer 1

纠正错字 -

position:fixed;

不是 -

postion:fixed;

Answer 2

您的位置拼写有误。请替换为：

position:fixed;

Answer 3

试试这个：

您必须将position应用于侧边栏div。不是postion

CSS代码：

.sidebar{
   background:rgb(24, 33, 61);
   text-align: right;
   height: 100% !important;
   width:30%;
   postion:fixed;
   left:0px;
   top:0px;
   bottom:0;
   padding:1em;
   color:white;
    position: fixed;
 }
 .content{
    width:70%;
   font-size:1.1em;
   font-weight:normal;
   position: absolute;
   top:0;
   right:0;
   padding:2em;
    height: 800px;
 }

<强>样本：

http://jsfiddle.net/eg23c/1/

Answer 4

喜欢这个

<强> DEMO

<强> CSS

*{
  box-sizing:border-box;
  margin:0px;
  padding:0px;
}
.sidebar{
   background:rgb(24, 33, 61);
   text-align: right;
   height: 100% !important;
   width:30%;
   postion:fixed;
   left:0px;
   top:0px;
   bottom:0;
   padding:1em;
   color:white;
  position:fixed;
  left:0;
 }
 .content{
    width:60%;
   font-size:1.1em;
   font-weight:normal;
   position: absolute;
   top:0;
   right:0;
   padding:2em;
 }

Answer 5

使用以下css：

 *{
      box-sizing:border-box;
    }
    .sidebar{
      background: none repeat scroll 0 0 #18213D;
        bottom: 0;
        color: #FFFFFF;
        margin-left: -25%;
        position: fixed;
        top: 0;
        width: 50%;
     }
     .content{
        width:70%;
       font-size:1.1em;
       font-weight:normal;
       position: absolute;
       top:0;
       right:0;
       padding:2em;
     }

演示： http://jsfiddle.net/SC5ET/

位置：固定不工作

5 个答案: