Question

我一直试图让我的头脑管理特定的布局而不使用flexbox（特别是flex-direction：column）。我几乎可以肯定这已经在其他地方被问到，但是对于我的生活我还没有找到它，所以我很抱歉，如果有的话，如果有人能告诉我，我会很高兴地关闭它在其他地方回答。

问题在于：给定任意数量的div，除了其中一个具有固定高度之外，我怎样才能将它们排列在一列中，以便剩余的元素填充100％的可用高度，之后其他人已被考虑在内？

看起来像（Codepen）：

div.container
  div.cell.fixedheight
  div.cell.fillheight
  div.cell.fixedheight
  div.cell.fixedheight
  div.cell.fixedheight

这很容易使用flexbox实现，例如：

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.fixedheight {height: 20px;}
.fillheight {flex: 1;}

但我基本上不能使用flexbox，因为这里需要支持旧浏览器。

编辑，当我说我无法使用flexbox时，我的意思是甚至没有供应商前缀：（

Answer 1

您可以使用表格布局实现它，使用行样式和单元格样式的div包装。如果有人知道一个解决方案并没有在标记中包含额外的包装器，我很乐意接受它：）

请参阅此Codepen的方法，但我会在此处输入相关代码：

div.container
  div.row.fixedheight
    div.cell
  div.row.fillheight
    div.cell
  div.row.fixedheight
    div.cell
  div.row.fixedheight
    div.cell
  div.row.fixedheight
    div.cell

然后是CSS：

.container {
  display: table;
}

.row {
  display: table-row;
}

.row.fixedheight {
  height: 20px;
}

.row.fillheight {}

.cell {
  display: table-cell;
}

.cell将接受很少的进一步样式（边距等），因此他们需要充当你想要放入其中的任何风格丰富的div的包装。

另请注意，多个.fillheight将平均分配它们之间的可用高度。

另外请注意，固定高度行实际上不是固定高度 - 20px将被有效地用作最小高度，但是单元格将包裹其中的任何内容。我一直在接受这个并且在单元格和高度上设置高度：0：内部div上的20px，不是桌面样式。

Flex列替换不受支持的浏览器

1 个答案: