-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 は移動せず、同じ場所にとどまります。
コードペンのデモンストレーション

どうすればそれを機能させることができますか？

4

5 に答える 5

3

位置のスペルに誤りがあります。次のように置き換えてください。

position:fixed;
于 2013-08-24T12:53:41.890 に答える
0

これを試して：

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/

于 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 に答える