一個DIV固定的，其他自動填充頁

Question

我有這樣的腳本：

jsFiddle

我設法使#middle DIV自動填充頁面，但我需要做出正確的DIV固定和內容仍表現相同。我真的被困在這一點上，而且不知道該怎麼做。我需要一個想法。

HTML

<div id="container"> 
    <div id="middle">Middle</div> 
    <div id="right">Right</div> 
</div> 

CSS

*{ 
    margin: 0px; 
    padding: 0px; 
} 
body, html{ 
    height: 100%; 
} 

#container { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 

#middle, #right { 
    display: table-cell; 
    height: 100px; 
} 

#right { 
    width: 150px; 
    background: #1f1f1f; 
    height: 100%; 
    color: white; 
} 

#middle { 
    background: white; 
} 

Answer 1

如果設置了右側面板的屬性是這樣的：

position:fixed; 
right:0; 
top:0; 

，你會得到你想要的功能。問題是，固定屬性將div從「正常流程」中移除，並且它將與中間div重疊。爲了解決這個問題，你可以設置中間div的位置，然後使用CSS計算調整寬度（）函數：

position:absolute; 
top:0; 
left:0; 
width: calc(100% - 150px); 

的150像素是您正確的div的寬度。注意 - 周圍的空間，它們很重要！

jsFiddle

Answer 2

您是否嘗試過申請固定在#right位置？

position: fixed; 
right: 0; 
top: 0;