Css 最大化浮动div？

假设我有两个并排的div：一个向左浮动，另一个向右浮动。现在假设我将左侧浮动div的大小固定为200px。如何强制右浮动div“最大化”自身或占据剩余的水平屏幕空间（无论浏览器窗口大小如何？

A不使用javascript（或IE不支持的灵活的方框模型），没有好的方法可以做到这一点

---

我只需要找到视口宽度，然后去掉220，然后设置宽度。使用jQuery，这将是一个单行线。

你不能，因为浮动元素无法容纳剩余空间。如果你想让右浮动div占据整个持久空间，你应该让float属性为none，让显示阻塞。

当“right”div的nt没有特殊的突发内容（例如太长的文本没有空格，或者图像太大）-只需删除float:right

<div style="width:300px;border:red 1px solid">
    <div style="float:left;width:100px;border:1px solid green;">bla</div>
    <div style="border:1px solid black;">bla-bla</div>
</div>

布拉
布拉布拉

正如Rich Bradshaw所提到的，您可以使用Javascript

函数resize_div（）{
$（“#maxdiv”）.width（$（#maxdiv”）.parent（）.outerWidth（）-200）；
}
$（文档）.ready（函数（）{
调整_div（）的大小；
});
$（窗口）。调整大小（函数（）{
调整_div（）的大小；
});

使用“假列”：一个

HTML:

如果“菜单”需要整个高度的背景，而“内容”需要另一个背景：

在容器上使用背景图像，重复-y并从左上角开始

该图像应具有“菜单”的宽度和菜单背景的颜色

也可以使用颜色作为背景，即内容背景所需的颜色

像这样：

.container{
    background: top left yellow url(http://www.google.com/images/firefox/sprite2.png) repeat-y;
}

方法：您基本上修复了左侧的“侧边栏”，并在右侧的灵活列中添加一个边距，该边距相当于侧边栏的宽度

代码如下所示：

.left {
    width: 200px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    background-color: #999;
}
.right {
    min-height: 100px;
    background-color: #666;
    margin-left: 200px; /* Same as left's width */
}​

---

它们都可以在IE6中正常工作。

你是说divs/window的宽度？JS当然不是必需的：请看其他答案。很好的解决方案，很容易过度应用这些东西！但是如果右栏高于左栏，右栏将溢出到左栏下方。我怀疑这是不必要的行为。可以，但你应该交换左栏请把你的密码贴在你的答案上。

.menu {
    background: blue;
    color: yellow;
    width: 100px;
    float: left;
}
.contents {
    background: green;
    margin-left: 100px;
}

.container{
    background: top left yellow url(http://www.google.com/images/firefox/sprite2.png) repeat-y;
}

.left {
    width: 200px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    background-color: #999;
}
.right {
    min-height: 100px;
    background-color: #666;
    margin-left: 200px; /* Same as left's width */
}​