Question

所以我正在尝试创建一个简单的标题/内容布局，其中内容部分延伸到窗口的底部。使用CSS进行操作看起来是不可能的，考虑到这种布局有多简单，不会引入太多复杂性。

请告诉我一个我不应该这样做的原因

body, html { height: 100%; padding: 0; margin: 0; }
#h{ height: 150px; }
#tbl { height: 100%; }

<table id="tbl" cellpadding="0" cellspacing="0">
  <tr>
    <td id="h">header</td>
  </tr>
  <tr>
    <td>content</td>
  </tr>
</table>

不要告诉我语义以及如何为布局制作表格。今天大多数网页设计师似乎是每天花费数小时试图以非常复杂的方式构建简单布局的受虐狂，因为他们喜欢用无关紧要的东西折磨自己。我可以听到你已经说过了“但是......但......使用div而不是桌子的john是最新的时髦事情，你不希望我们被其他网页设计师嘲笑吗？”

Answer 1

我们不再使用表格布局，因为它们不是语义。机器人和屏幕阅读器无法识别内容的好处。其次，您需要将内容与布局代码（职责分配）分开。

拥有外部CSS文件将使您的页面更易于维护。如果你有20多个页面都有一个表格来保存内容，你很可能需要编辑所有这些文件以进行重新设计。如果您使用CSS并拥有良好的文档布局宽度标识符，则只需更改一个.css文件即可更改所有布局。

你有一个问题。您希望在标题项下有一个内容区域。如果您愿意，可以通过更复杂的CSS解决问题，但不一定非必要。

首先，您将开始扩展标题。您可以使用<div>或使用标题（h1-h6）项目。就像每个机器人都知道＆gt; “哦！一个标题。这很重要！”

让我们构建您的文档：

<body>
<h1>Header</h1>
<div class="static-content">
    <p>Content</p>
</div>
</body>

出于布局原因，我们有一个标题和div宽度的类名“static-content”。您可以将此名称更改为您想要的名称（没有空格和起始宽度为字母字符），您还可以添加多个类，用空格分隔。

这里有一些CSS

html, body {
    height: 100%;
    margin:0;
    background-color: gray;
    padding: 0;
}

h1
{
    display: block;
    padding: 20px 10px;
    background-color: blue;
    margin: 0px 0px 0px 0px;
}

.static-content
{
    background-color: red;
    padding: 10px;
    margin: 0;
}

因此。就像你在这里可以看到的那样：http://jsfiddle.net/NicoO/rC66e/2/ 您的内容区域可以是红色（就像它一样）。但你也看到了灰色的背景。背景中的元素是body，您可以像几乎所有div一样使用身体。

所以你看，你已经将内容区域扩展到了浏览器的底部。如果您希望红色区域也位于底部，您可以使用多个选项来重新确定它。

请看这里的小提琴：http://jsfiddle.net/NicoO/rC66e/3/ 还有其他方法可以实现这一点。

更新。如果你真的希望红色区域很大，你可以试试这样的东西： http://jsfiddle.net/NicoO/rC66e/5/

这不是一个非常好的解决方案，因为我不知道你想用它做什么。你可以设置body元素的样式，你很高兴。如果你想要更复杂的布局，你必须添加你的CSS。这个小提琴中的解决方案不应该是通用的。但它表明，你可以做很多宽度的CSS。即使你没有真正向我们展示你的用例。

编辑：你一直在说“我为什么不把两排桌子扔掉？”。但另一方面，你试着在这里改变这个规则。你为什么不只是一个标题和一个段落？像<h1>Title</h1><p>content</p>你可以为body元素添加背景颜色并完成。没有理由在这里做任何其他事情。

最终编辑：你有一个有效的点@John。有时CSS会很痛苦。但它远远优于桌面布局。对于大多数常见问题，有像生长网格系统这样的工具，可以解决大部分问题。 W3C正致力于使CSS更强大，更易于使用。例如，使用新的显示器：grid;属性。如果你真的给了CSS一个机会，并尝试添加一个关于盒子模型的新思维模式，它将对你有很大的帮助。使用HTML和CSS，您只需编写您需要的内容，而无需始终拥有笨拙的表。如果我冒犯了你，我很抱歉。但我建议你加权表与css布局的优缺点。像响应式布局一样，有很好的东西，你将无法充分利用这些旧技术的宽度

Answer 2

我的个人观点：

使用表格进行布局就像使用咖啡保持清醒一样。不要经常这样做。也许有一段时间。

当然we shouldn't hassle people who use table-based layouts，尤其是there's no sound, cross-browser way to do a particular layout in CSS时。

那说......

<强> 1。表格使得一次设计多种屏幕尺寸变得更加困难

如今，响应式布局非常重要。对于不同的视口大小具有不同的CSS规则，应用于相同的HTML代码，是使网站适应所有屏幕的好方法。

对于非常简单的设计，基于表格的布局可以在任何屏幕尺寸下工作。

<强> 2。表可能会干扰搜索引擎索引，屏幕阅读器和其他自动网页解析

换句话说，SEO和可访问性不太好。

但是，值得指出的是Google has recently been optimizing its search algorithm来区分布局表和数据表。

虽然有those hacks can get complicated，但仍有一些技术可以<table role="presentation">来帮助屏幕阅读器处理表格。

第3。当您想要更改布局时，基于表格的布局需要更改HTML标记

同样，仅使用HTML作为内容/语义，它更好，更概念上更纯 - 并且通常更易于维护，因此您可以在进行设计更改时单独保留标记。但实际上，在实质性的重新设计中，您通常需要对HTML进行更改。

总之，我认为指南和最佳实践比关于布局表的硬性规则更有用。这是一种平衡行为，有些情况下，表格总体上可以是更好的选择。

标题/内容页面，内容div填充可用空间

2 个答案: