0

我有一个 HTML 编辑器小部件，我希望它出现在一个绝对定位、固定大小的 DIV 中。但是，我事先不知道 DIV 的绝对大小，它可能会发生变化，就像用户调整窗口大小一样。

编辑器自然具有控件和可编辑区域。每个都有自己的 DIV。我希望控件占用尽可能多的空间，并希望可编辑区域填充其余空间。

如果我使用表格，这非常容易实现。我只是关闭边框、填充和边距，然后将每个 DIV 放入自己行中的一个单元格中，并可能在控件 DIV 上摆弄 max-height 。这是它的样子：

基表 http://img407.imageshack.us/img407/8435/table1.png

带有窗口的同一张桌子以另一种方式调整大小 http://img264.imageshack.us/img264/6438/table2p.png

请注意，可编辑部分占用了尽可能多的空间，而不会导致出现滚动条。

我已经对各种 CSS 示例进行了修改，如果没有在调整大小时运行一些 JavaScript 以使可编辑的 DIV 成为父级的高度减去控件的高度，似乎没有任何效果。

当然，我可以让父 DIV 具有 display:table，子 DIV 包含在 display:table-row DIV 中，并且它们本身具有 display:table-cell，但是......嗯......在这种情况下，它与使用 TABLE、TR 和 TD，但为了 CSS 纯度，丑陋十倍。（何苦？）

那么，不直接使用 display:table & friends，也不是 TABLE/TR/TD，也不是 JavaScript，有没有一种纯 CSS 的方式来做到这一点？换句话说，有没有一种纯 CSS 的说法，DIV1 占用尽可能少的垂直空间，DIV2 占用父元素内剩余的垂直空间？

如果没有，我已经准备好停止订阅“纯 CSS”的心态。在开发人员或最终用户几乎没有受益的情况下，这让我感到非常悲痛。

4

4 回答 4

1

这个问题说明了我最近看到很多人面临的一个问题：遵守“仅将表格用于表格数据”的规则，或者只使用表格并完成 1/3 的工作。这甚至是一个艰难的决定这一事实证明了我们都变得多么疯狂。忘记标准，使用表格，干脆利落地完成它。如果 W3C 对此有疑问，他们可以在创建更好的替代方案后立即投诉。

于 2009-03-30T16:02:01.737 回答
1

你只有这么多选择。如果您想要在不使用表格的情况下进行类似表格的行为，请使用 display:table 并让自己选择稍后改变主意。这样，虽然标记（主观）更丑陋，但对我来说更有意义：您最终会得到更多元素，但不会被锁定在特定布局中。

如果您不关心标记，请扣动扳机并使用表格。这在短期内会更容易。

我的问题：如果您不想使用 JavaScript，您将如何实现编辑器控件？

于 2009-03-30T18:18:21.083 回答
0

据我所知，使用百分比作为宽度/高度应该可以正常工作。

于 2009-03-30T15:56:01.657 回答
0

我会第二次perfectDay的答案，但我会要求你发疯并尝试描述你希望它看起来像什么。也许使用 ascii-art 或图形链接，所以我们知道您希望我们帮助您实现什么布局。

我还要补充一点，我最近（再次）没有睡觉，所以......如果我错过了一个明显的超清晰描述你希望我们帮助你实现什么，你有我最诚挚的歉意。:)

于 2009-03-30T16:41:10.380 回答