Question

我希望左侧有一个固定宽度<div>，右侧有一个灵活的<div>，用于调整窗口大小。同样，左<div>是可折叠的（我使用jQuery隐藏负边距），然后我需要正确的<div>来获得全宽。

PS：我没有能够在没有水平卷轴的情况下在带有填充的容器内放置100％宽度的div ...

Answer 1

我希望有一个固定的宽度左边，一个灵活的适合窗口调整大小的时间。

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。

Answer 2

将右div的margin-left设置为左div的宽度。当您运行脚本以折叠left-div时，您将必须调整right-div的边距。

http://jsfiddle.net/vpKfn/

Answer 3

这是使用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; 
}

左侧固定宽度div，右侧固定宽度div

3 个答案: