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

问：

因此，我正在尝试创建一个简单的标题/内容布局，其中内容部分延伸到窗口底部。使用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>

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

HTML CSS格式

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

你有一个问题。您希望在标题项下有一个内容区域。如果你愿意，这确实可以用更复杂的CSS来解决，但不必如此。

首先，您将开始加宽标题的宽度。您可以使用该标题或使用标题（h1-h6）项目。像这样，每个机器人都会知道>“哦！一个标题。这很重要！<div>

让我们构建您的文档：

<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/ 你的内容区域可以是红色的（就像它一样）。但你也会看到灰色的背景。背景中的元素是您可以像几乎任何一样使用身体的元素。bodydiv

所以你看，你已经把你的内容区域延伸到浏览器的底部。如果您希望红色区域也位于底部，则有多种选择来实现这一点。

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

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

这不是一个非常好的解决方案，因为我不知道你想用它来做什么。你只需要设置元素的样式，你就可以开始了。如果你想要更复杂的布局，你将不得不添加你的CSS。这把小提琴中的独奏不是通用的。但它表明，你可以做很多事情 width CSS。即使您没有真正向我们展示您的用例。body

编辑：你一直说“我为什么不直接使用两排桌子？但另一方面，你试图改变这个规则来寻找答案。你为什么不只写一个标题和一个段落呢？比如你可以给body元素添加一个背景色，然后就完成了。这里没有理由做任何其他事情。<h1>Title</h1><p>content</p>

最终编辑：您有一个有效的点@John。有时 CSS 可能会很痛苦。但它远远优于表格布局。对于最常见的问题，有一些工具，如生长的网格系统，可以解决大部分问题。W3C 正在努力使 CSS 更强大、更易于使用。例如，使用 thew new display：grid;财产。如果你真的给css一个机会，并尝试添加一种新的盒子模型思维模式，它会对你有很大的帮助。使用 HTML 和 CSS，您可以编写所需的内容，而不必一直使用笨拙的表格。如果我冒犯了你，我很抱歉。但我建议你权衡表格与css布局的优缺点。周围有一些非常好的东西，比如响应式布局，你将无法充分利用这些旧技术的宽度

@NicoO 反对票意味着它不起作用，而且它不起作用。仍然没有回答这个问题，你一直在取笑我，并想出另一个无关紧要的例子。“你可以把这个名字改成你想要的任何名字（没有空格，开始宽度是字母字符），你也可以添加多个类，用空格分隔。”这是什么？CSS快速入门课程？谢谢明显先生。总体结论是，CSS没有解决方案，时髦的网页设计师再次失败。感谢所有提供真实答案而不是嘲笑的人。

0赞 Nico O 2/5/2014

我不是故意要冒犯你的。你的提问风格非常激进。我们不需要提供答案。我想我以各种可能的方式回答了你的问题。最后的小提琴（jsfiddle.net/NicoO/rC66e/5）到你所要求的。但我仍然认为你脑海中对盒子模型有一个错误的形象。没有必要为了你不想达到的结果而拉伸一些东西。你是对的，你可以用一张桌子轻松做到这一点。我不是告诉你不要这样做。但我不会这样做。请告诉我我的最后一把小提琴如何没有解决你的问题。

1赞 jkdev 1/19/2016 #2

我个人的看法：

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

当然，我们不应该给使用基于表格的布局的人带来麻烦，尤其是当 CSS 中没有声音的跨浏览器方法来执行特定布局时。

可是。。。

1. 表格使同时设计多种屏幕尺寸变得更加困难

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

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

2. 表格可能会干扰搜索引擎索引、屏幕阅读器和其他自动网页解析

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

不过，值得指出的是，谷歌最近一直在优化其搜索算法，以区分布局表和数据表。

还有一些技术可以帮助屏幕阅读器处理表格，尽管这些技巧可能会变得复杂。<table role="presentation">

3. 基于表格的布局在想要更改布局时需要更改 HTML 标记

同样，仅将 HTML 用于内容/语义更好、更纯粹，而且通常更易于维护，因此在进行设计更改时可以不考虑标记。但实际上，在实质性的重新设计中，无论如何，您经常需要对 HTML 进行更改。

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

上一个：用于将 JSON 属性值包装在另一个字符串中的正则表达式

下一个：Mysql获取随机用户名

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

Header/content page with content div filling available space

评论

评论