Javascript CSS HTML-DIV高度填充剩余空间

所以我有一个这样的布局：

div{
边框：1px实心
}

1
2.
3

去掉宽度，它应该扩展以填充所有内容。放置宽度：100%，如果您愿意。您应该查看firefox的firebug插件。

将所有三个div放在一个容器中，给col 1和col 2固定宽度，并将第三个设置为auto。

这需要Javascript。如果您希望所有3个div都填满窗口空间（100%），那么我们需要使用javascript来检测剩余的空间，并相应地分配col_3的高度。使用jQuery，您可以

var one = $('#col_1').height(),
two = $('#col_2').height(), 
remaining_height = parseInt($(window).height() - one - two); 
$('#col_3').height(remaining_height); 

---

您已经接受了答案，但是您可以查看CSS Flexbox，它旨在解决这个确切的问题，而不依赖于“float:left”黑客。它适用于Chrome、Safari和FF（前缀为-webkit和-moz）。还没上

以下是一些快速链接：

---

使用jQuery计算剩余空间，或使用css3灵活框填充剩余空间：

---

图2是您想要的情况-具有最大“box flex”的最后一个框将占用剩余空间（默认box flex为0）

您可以做一些疯狂的事情，放弃javascript和不太适合黄金时段CSS3的东西，使用绝对定位

看。 通过浏览器大小调整，表现良好的额外点数

第1列{
位置：绝对位置；
顶部：0px；
底部：0px；
宽度：100px；
背景色：#eee；
}
#col_2{
位置：绝对位置；
顶部：0px；
底部：0px；
宽度：150px；
左：100px；
背景色：#ccd；
}
#第3栏{
位置：绝对位置；
顶部：0px；
底部：0px；
左：250px；
右：0px；
背景色：#cdc；
}

第1列
第2栏
第3栏

您需要块格式上下文：

#c1,#c2 {
    background-color: red;
    float: left;
    width: 200px;
}
#c2 {
    background-color: green;
}
#c3 {
    background-color: yellow;
    height: 40px;
    overflow: auto;
}

---

是溢出使它工作。更多信息：

以下是关于只使用CSS的一些想法。我已经在FF12、GC18、SAF5.1和IE 7、8、9、9CV中对其进行了测试

.Clearfix:after{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
}
.Clearfix{
显示：内联块；
}
html[xmlns].Clearfix{
显示：块；
}
*html.Clearfix{
身高：1%；
}
#包装纸{
背景色：#FC20C9；
}
#上校1{
浮动：左；
宽度：150px；
背景色：#FF0000；
}
#col_2{
浮动：左；
宽度：100px；
背景色：#00CC00；
}
#第3栏{
宽度：自动；
浮动：无；
背景色：#0066FF；
溢出：隐藏；
}

乱数假文
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
在此处输入代码

如果您针对的是最新的浏览器，则可以使用HTML5

calc

功能

第3列{
宽度：计算（100%-（100px+150px））；
}
#红色的{
边框：1px实心黄花；
}
div{
边框：1px实心；
}

1.
2.
3.

这在Firefox中不起作用（div转到下一行）。firebug如何帮助我解决这个问题？那不行。100%只会让它占据父元素的宽度，显然这不是我们想要的。谢谢，我会尝试给出所有答案。你不是在问高度而不是宽度吗？小心flexbox，有一种方法会改变它们的工作方式，使其更直观。我不是在谴责你的建议，但将浮动描述为“黑客”不是有点过分吗？特别是考虑到Flexbox（不幸的）缺乏支持。现在Flexbox是一个不错的选择，除非你必须支持非常旧的浏览器。这在很大程度上是可行的。必须添加一些缓冲区空间，因为宽度不包括边距/边距等。如果希望使用边距+边距来计算，请使用.outerHeight（）；有一种不用javascript的方法；请看下面我的答案。@FMM您的答案不再在下面；）你测试过你的例子吗。我没有看到col3填满了剩余的空间。jsiddle已更新。只需添加一个“右：0px；”这是正确的，应该是公认的答案。使用JavaScript进行基本布局是一种糟糕的形式。