Html 使用CSS将一个或两个div拉伸到整个td

我有servlet生成的HTML，它有一个表和一个或两个div，具体取决于配置。下面是一个快速示例：

表格{
表布局：固定；
}
td.td-div{
宽度：80%；
}
td.td-text{
背景色：#faf0ff；
宽度：20%；
}
外分区{
填充：0；
保证金：0；
宽度：100%；
身高：100%；
背景：#f0fffa；
显示：内联块；
}
第一节，第二节{
背景色：#ccc；
边距：1米0.1米0；
填充：0；
宽度：100%；
}

第一组
第二组
它只是一个文本来填补这个空白。它只是一个文本来填补这个空白。它只是一个文本来填补这个空白。

如果您可以在项目中使用

flexbox

，您可能可以执行以下操作：

CSS

看这个演示。删除

div second

并在小提琴中点击Run，您将看到第一个div将占据整个td，或者添加第三个div，并看到它均匀地占据整个空间

更新

要为旧浏览器（看看IE）实现一些功能，可以使用javascript，如（jQuery）：

试试这个：

div#container {
    padding:20px;
    background:#F1F1F1
}
.content {
    width:150px;
    background:#ddd;
    padding:10px;
    display:table-cell;
    vertical-align:top;
}
.text {
    font-family: 12px Tahoma, Geneva, sans-serif;
    color:#555;
}

此外： 在小提琴中，您可能需要向左拉动分隔符以调整窗口大小，使所有内容都正确显示

这利用了“flex”显示样式。我不确定这是否正是你想要的，但它可能是

以下是有关flex显示样式的更多信息：

---

该解决方案使用CSS

显示：表格

和

显示：表格行

的组合，还需要在容器上设置高度：100%

表格{
表布局：固定；
边界塌陷：塌陷；
边框：1px纯红；
宽度：100%；
身高：100%；
}
运输署分区{
宽度：80%；
}
.td文本{
背景：黄色；
宽度：20%；
}
#外{
显示：表格；
宽度：100%；
身高：100%；
}
.div第一，div第二{
显示：表格行；
背景：水；
}
第二分区{
背景：水鸭；
}

第一组
第二组
它只是一个文本来填补这个空白。它只是一个文本来填补这个空白。它只是一个文本来填补这个空白。


唯一div
它只是一个文本来填补这个空白。它只是一个文本来填补这个空白。它只是一个文本来填补这个空白。

函数跨度高度（选择器、父级）{
var$parents，$selector；
$家长=$（家长）；
$selectors=$parents.find（选择器）；
$selectors.css({
高度：（100/$selectors.length+'%'）
});
}
跨距高度（‘内’、‘外’）；

表格{
表布局：固定；
边界塌陷：塌陷；
边框：1px纯红；
}
运输署分区{
宽度：80%；
位置：相对位置；
垂直对齐：顶部；
}
.td文本{
背景：黄色；
宽度：20%；
}
#外{
宽度：100%；
身高：100%；
位置：绝对位置；
左：0；
右：0；
顶部
0;
底部：0；
}
.第一分区，
第二分区{
背景：水；
}
第二分区{
背景：水鸭；
}

第一组
它只是一个文本来填补这个空白。它只是一个文本来填补这个空白。它只是一个文本来填补这个空白。它只是一个文本来填补这个空白。它只是一个文本来填补这个空白。这只是一个文本来填补这个空白
空间它只是一个文本来填补这个空白。它只是一个文本来填补这个空白。它只是一个文本来填补这个空白。它只是一个文本来填补这个空白。它只是一个文本来填补这个空白。这只是一个需要填充的文本
这是一片空白。它只是一个文本来填补这个空白。它只是一个文本来填补这个空白。
遗憾的是，我不得不支持IE9。据我所知，flex从ie10甚至11开始就受到支持。这是一个遗憾：（在那些旧的IE浏览器中很难获得动态、灵活的响应布局。可能必须使用javascriptSure，我甚至可以用我的servlet生成一些内联css（高度为50%或100%），以生成这种html，但我认为必须有更“优雅”的布局我会尽力把它们放在桌子上。也许它会有帮助…@BbIKTOP我已经为旧浏览器提供了一个javascript解决方案，如果它能帮助你的话，这是显而易见的。也许有一个纯粹的css解决方案，但在你的小提琴里，那些div并没有填满100%的单元格。有并没有可能通过拉伸它们来填满整个细胞？我认为这是小提琴的杰作。如果移动分隔条为渲染提供更多空间，则应修复该分隔条。虽然这种方法使用了flex的东西，但我认为你在另一篇评论中提到的并不是一个可行的解决方案。不幸的是，他们使用ie9@BbIKTOP请测试代码，它确实可以工作。我在代码段中有两个示例。当然，我已经测试过了！在您的示例中，div的高度为50%——这就是为什么在没有第二个div的情况下，第一个div不适合整个单元格。
$(function(){
    var h =  $('table').height() / $('div#outer').children().length;
    $('div#outer > div').height(h);
});

div#container {
    padding:20px;
    background:#F1F1F1
}
.content {
    width:150px;
    background:#ddd;
    padding:10px;
    display:table-cell;
    vertical-align:top;
}
.text {
    font-family: 12px Tahoma, Geneva, sans-serif;
    color:#555;
}