最大化浮动div？答案

【问题标题】：Maximize a floating div?最大化浮动div？
【发布时间】：2010-06-08 20:30:31
【问题描述】：

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

【问题讨论】：

你的意思是div/window的width？

标签： css html

【解决方案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 中按原样工作。

【讨论】：

有效，但您应该交换左右 div。 ;) 并将您的代码粘贴到您的答案中。

【解决方案2】：

你不能因为它不是浮动元素来适应剩余空间。如果你想让你的右浮动 div 占据整个持久空间，你应该让 float 属性为 none 并让显示阻塞。

【讨论】：

【解决方案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>

【讨论】：

但是如果右列高于左列，则右列将溢出到左列之下。我怀疑这是不受欢迎的行为。

【解决方案4】：

我认为不使用 javascript（或 IE 不支持的灵活框模型）没有很好的方法。

我只是找到视口宽度，然后带走 220，然后设置宽度。使用 jQuery 这将是一个单线器。

【讨论】：

JS 当然不是必需的：请参阅其他答案。
不错的解决方案，这些东西很容易过于复杂！

【解决方案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>

【讨论】：

【解决方案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;
}

【讨论】：