-3

我有一个包含以下内容的 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;
 }

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

我怎样才能让它工作？

4

5 回答 5

5

更正错字——

position:fixed;

不是 -

postion:fixed;
于 2013-08-24T12:52:08.493 回答
3

你的职位拼写有误。请替换为：

position:fixed;
于 2013-08-24T12:53:41.890 回答
0

试试这个：

您必须申请position侧边栏 div。不是postion

代码：

.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/

于 2013-08-24T12:48:57.777 回答
0

像这样

演示

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;
 }
于 2013-08-24T12:49:47.213 回答
0

使用以下 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/

于 2013-08-24T12:50:32.533 回答