左側固定寬度div，右側流體寬度div

我希望左側有一個固定寬度<div>，右側有一個靈活的<div>，用於調整窗口大小。也，左<div>是可摺疊的（我用jQuery來隱藏它的負邊距），然後我需要正確的<div>有全寬。左側固定寬度div，右側流體寬度div

PS：我不能夠有填充容器內100％的寬格，而不必水平滾動...

來源

2011-07-05 Vitor Reis

你能提供你的代碼嗎？ HTML和CSS開始。 –

我想有固定寬度的左，右的，當調整窗口大小的靈活。

float: left只有左div，並添加overflow: hidden向右div。

參見：http://jsfiddle.net/JsLuG/

而且，左邊是可摺疊的（我使用jQuery負利潤率掩蓋它），然後我需要正確的有充分的寬度。

與我的方法的工作原理：http://jsfiddle.net/JsLuG/1/

PS：我不是，而無需水平滾動能夠有一個容器內的100％寬度DIV與填充...

這是因爲width: 100%不包括padding。

參見：http://css-tricks.com/2841-the-css-box-model/

最簡單的方法來解決，這是不申報width: 100%。塊級元素將默認採用「全寬」（width: auto）。

或者，添加一個包裝元素，並把padding。或者，使用box-sizing: border-box。

來源

2011-07-05 14:26:06 thirtydot

這真的很有趣，我沒有想到'overflow：hidden'來改變div位置本身的方式。你知道爲什麼發生這種情況嗎？ – hughes

看起來像'overflow：auto'也可以，但不會溢出：可見。 – hughes

'overflow：hidden'強制創建一個新的「塊格式化上下文」。本文解釋它：http://colinaarts.com/articles/the-magic-of-overflow-hidden/ – thirtydot

剛剛成立的利潤率左右的div是寬度左邊的div。當您運行腳本來摺疊左側div時，您必須調整右側div的邊距。

http://jsfiddle.net/vpKfn/

來源

2011-07-05 14:02:56 hughes

也適用於崩潰：http://jsfiddle.net/vpKfn/7/ – hughes

這是一個很好的用例使用postion:fixed;下面的例子將讓你開始。您可以輕鬆製作不同的類，以便在側欄隱藏時切換div上的類以使用不同的位置值。

HTML

<div class="sidebar">side stuff</div> 
<div class="main">main content</div>

CSS

.sidebar{ 
    background-color:#CCC; 
    position:fixed; 
    left:0; 
    top:0; 
    bottom:0; 
    width:150px; 
} 

.main{ 
    background-color:#AAA; 
    position:fixed; 
    left:150px; 
    top:0; 
    bottom:0; 
    right:0; 
}

來源

2011-07-05 14:07:15

左側固定寬度div，右側流體寬度div

回答

相關問題