我真的在尝试使用 div，但我似乎无法获得与以下简单表格布局等效的内容：

我要保留的重要元素：

1. 任何真实的内容都是固定宽度的。（在这种情况下，750 像素）

2. 页眉和页脚背景扩展为页面宽度的 100%。

3. 主要内容背景不会水平扩展，但会垂直扩展以填充页眉和页脚之间的区域。

4. 即使主要内容不是很高，页脚也始终位于页面底部。

我尝试了多种策略，发现至少有两种不同的方法可以使用 div 将页脚保持在页面底部。不幸的是，如果主要内容在 div 中，似乎没有任何方法可以使其垂直扩展以填充短页面上页眉和页脚之间的空间。

编辑：更改了示例以显示即使不在怪癖模式下它也可以工作。以上为证。

编辑2：

我已经找到了一种在很大程度上使用 javascript 来做到这一点的方法。所以，我想我的问题是：我如何在没有 javascript 的情况下做到这一点。这是我正在使用的（我确定它只适用于 Firefox，但我可以修复它）：

“内容”将指定我要扩展的主要内容 div。

我想在可以在 Internet Explorer 中使用的 CSS 上添加悬停时突出显示的行。我尝试了以下方法：

这似乎适用于 Opera、Firefox 和 Safari，但不适用于 IE。

有解决方案还是唯一的解决方案 JavaScript？

我有一个 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”的心态。在开发人员或最终用户几乎没有受益的情况下，这让我感到非常悲痛。

在我的 HTML 文档中，我有一个包含两列和多行的表格。如何使用 css 增加第一列和第二列之间的空间？我试过应用“margin-right：10px;” 到左侧的每个单元格，但没有效果。

我正在尝试使用 div 而不是表格来围绕我的内容设置样式框。内容可以是任意大小，并且需要允许浏览器任意调整大小。需要背景颜色和边框来包含内容。这适用于表格。如何让 div 以相同的方式工作？

注意：我添加了“_”，因为我的不间断空格丢失了。

示例页面

示例图像

_{（来源：c3o.com）}

内容：

我有一个 html 表格作为页面的布局（我知道的不好的做法）。这张表是这样的：

我刚刚添加了一条验证错误消息，该消息对于第一行来说可能非常大，所以现在是：

为了使设计工作，我在包含验证消息的单元格中添加了一个 colspan，以便它跨越整个表格。它适用于长度小到不会溢出表的错误消息。除此之外，我得到：

第4行完全搞砸了。有没有办法指定错误消息单元格内容应该溢出表格，而不是扩大同一列中其他单元格的空间？也许一些神奇的CSS？

副本：

• 为什么不在 HTML 中使用表格进行布局？
• DIV 与表格或 CSS 与愚蠢

最近有很多关于使用 div 而不是 table 标签来使您的页面更适合浏览器的讨论。为什么div更好？

我想显示一个具有经典设计的 html 页面。页眉、页脚、内容和右侧的栏。

出于某种原因，我不喜欢内容的固定宽度。在宽屏幕上，您应该能够调整页面大小，使其填满屏幕，或者使其非常小以并排显示两个页面。

我也想使用 div 标签而不是表格布局。使用 div 标签给了我以下优势（有人告诉我）：

• 可以在等待“右”栏时呈现内容
• 在手机上，Div 标签可以在彼此下方显示，而不是并排显示。

我的测试/调试 html 如下所示：

这段代码的输出在这里：

_{（来源：vantslot.be）}

（文字无所谓，只有布局，所以我把它缩小了一点）。

顶部布局使用 div：错误

底部布局使用表格：好

我的问题/问题

如何将“右”栏定位在内容的右侧，同时保持内容的动态宽度，而不使用表格布局？

我真正想要的是右窗格出现在内容的右侧，但是当浏览器太小（< 20em）时，它可以显示在它下面。这对于表格是不可能的，所以我更喜欢 div 解决方案。

在最终的网站中，页眉/页脚/内容和右侧的内容将动态生成，因此我无法对高度进行硬编码。

编辑

谢谢所有的答案，这真的帮助我前进。

我看到这里有什么“错误”。我将右窗格放在内容窗格之后。如果我将右窗格放在内容窗格之前，它会正确呈现（在向内容添加边距后）。

这对于 html 的流程来说有点不合逻辑。由于内容比右窗格中的内容更重要，我希望它在右窗格之前发送给客户端。

错误标签一直显示到表格的宽度。像这样：

替代文字 http://img518.imageshack.us/img518/8864/width1.jpg

如何在标签文本之前显示它？这是CSS：

我有一个使用传统标签设计的网站，但我需要转换为基于 CSS 的标签。有没有更好的方法（免费软件/工具）来做到这一点，而不是一次拿一个标签并转换它？