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

我設法使#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; 
}

來源

2014-07-23 Sergiu Neagu

「固定」你是指'position：fixed'或究竟是什麼？ – Simon

是的，當我使用鼠標滾動時，我需要正確的div來站在它的位置，只滾動'＃middle' div內容。 –

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

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

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

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

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

jsFiddle

來源

2014-07-23 17:02:21 Zach

它的工作原理！謝謝！ –

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

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

來源

2014-07-23 16:43:42 neno

但你也需要改變中間，看看這個作品http://jsfiddle.net/AjgNM/87/ – neno

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

回答

相關問題