左侧固定宽度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

回答

相关问题