Question

假设我有2个div并排：1个浮动，另一个浮动。现在说我将左浮动div的大小修改为200px。如何强制右浮动div“最大化”自身或占据水平屏幕空间的其余部分（无论浏览器窗口的大小如何？

Answer 1

Here's a solution (inverted, right is fixed 200px) for you using position:absolute

Here's a solution where the left is fixed 200px

方法：您基本上修复左侧“侧边栏”并在右侧柔性列上添加边距，这相当于侧边栏的宽度。

代码如下所示：

.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中工作。

Answer 2

你不能因为没有浮动的元素来适应剩余的空间。如果你希望你的右浮动div占用整个持久空间，你应该将float属性设置为none，并让显示阻止。

Answer 3

当'right'div的内容没有特殊的突发内容时（例如，没有空格或大图像的文本太长） - 只需删除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>

Answer 4

如果不使用javascript（或IE中不支持的灵活的盒子模型），我认为没有一种好方法可以做到这一点。

我只是找到视口宽度，然后取走220，然后设置宽度。使用将成为oneliner的jQuery。

Answer 5

正如Rich Bradshaw所说，你可以使用Javascript。我的第一次尝试（使用jQuery）将是

<script type="text/javascript">                                         
function resize_div() {
  $("#maxdiv").width($("#maxdiv").parent().outerWidth()-200);
}
$(document).ready(function() {
  resize_div();
});
$(window).resize(function() {
  resize_div();
});
</script>

Answer 6

使用“虚假列”：example。

HTML：

<div class="menu">
    menu<br />
    menu<br />
    menu
</div>
<div class="contents">
    contents<br />
    contents<br />
    contents<br />
    contents
</div>

CSS：

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

如果你需要在“菜单”的整个高度上有背景，而另一个用于“内容”：

在容器上使用背景图像，重复y并从左上角开始;
该图像应具有“菜单”的宽度和菜单背景的颜色;
并使用颜色作为背景，也就是内容背景所需的颜色。

像这样：

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

最大化浮动div？

6 个答案: