位置是：固定不工作

-3

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

我想.sidebar是position:fixed，但不是。內容。這是我在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。但是我現在看到的第一眼看起來很完美，但是當您向下滾動時，側邊欄不會隨着您移動，而是停留在同一個位置。
Codepen demonstration

我該如何使它工作？

來源

2013-08-24 svineet

您在css代碼中存在拼寫錯誤。它是'位置'而不是'位置'。 –

我討厭自己:( – svineet

）不要恨自己，將來只要使用[驗證器]（http://jigsaw.w3.org/css-validator/） –

糾正錯字 -

position:fixed;

不 -

postion:fixed;

來源

2013-08-24 12:52:08 svineet

試試這個：

您必須申請position側邊欄股利。不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; 
}

DEMO：

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

來源

2013-08-24 12:48:57 Unknown

你可能剛告訴我有一個錯字，對不起，我只是給你+1，並沒有標明你是正確的，正如一位評論者在你面前告訴我的那樣 – svineet

像這樣

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; 
}

來源

2013-08-24 12:49:47 falguni

let us [在聊天中繼續討論]（http://chat.stackoverflow.com/rooms/36160/discussion-between-divya-bhalodiya-and-fags） –

使用下面的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-24 12:50:32

。在你的位置的拼寫錯誤。請替換爲：

position:fixed;

來源

2013-08-24 12:53:41

位置是：固定不工作

回答

相關問題