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

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

html css

Html 标题/内容页，内容div填充可用空间,html,css,Html,Css,因此，我试图创建一个简单的标题/内容布局，其中内容部分延伸到窗口底部。考虑到这个布局有多简单，使用CSS看起来是不可能的，至少不会引入太多的复杂性请告诉我一个我不应该这样做的原因 body, html { height: 100%; padding: 0; margin: 0; } #h{ height: 150px; } #tbl { height: 100%; } <table id="tbl" cellpadding="0" cellspacing="0"> <

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

body，html{height:100%；padding:0；margin:0；}
#h{高度：150px；}
#tbl{高度：100%；}
标题
内容

不要告诉我语义和表格不是为布局设计的。似乎今天的大多数网页设计师都是受虐狂，他们每天花数小时试图以非常复杂的方式构建简单的布局，因为他们喜欢用无关紧要的东西折磨自己。

我听到你已经在说“但是……但是……约翰用div代替表格是最新流行的做法，你不想让我们被其他网页设计师嘲笑吧？”

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

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

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

首先，你将开始宽度你的标题。您可以使用

，也可以使用标题（h1-h6）项。这样每个机器人都会知道>“哦！一个标题。这很重要！”

让我们来组织您的文档：

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

所以。就像你在小提琴上看到的：您的内容区域可以是红色的（就像它一样）。但是你也可以看到灰色的背景。背景中的元素是

body

，您可以像处理任何

div

一样处理body

因此，您已经将内容区域拉伸到浏览器的底部。如果你想让红色区域也在底部，你有多种选择来实现这一点

请看这里的小提琴：还有其他方法可以实现这一点

更新。如果你真的想让红色区域变大，你可以尝试以下方法：

这不是一个很好的解决方案，因为我不知道你想用它做什么。您只需设置

主体

元素的样式即可。如果你想要更复杂的布局，你必须添加你的CSS。这把小提琴中的梭子并不像它应该的那样是通用的。但它表明，你可以做很多事情。即使你没有向我们展示你的用例

编辑：你一直在说“我为什么不干脆放一张两排的桌子呢？”。但另一方面，你试图改变这个规则来得到答案。你为什么不写一个标题和一个段落呢？像

Titlecontent

一样，您可以向body元素添加背景色，然后完成。没有理由在这里做任何其他事情

最终编辑：你有一个有效的观点@John。有时候CSS会让人感到痛苦。但它远远优于表布局。对于最常见的问题，有一些工具，比如生长的网格系统，可以解决大部分问题。W3C正在努力使CSS更加强大和易于使用。例如，使用W新显示：栅格；财产。如果你真的给css一个机会，并尝试添加一种新的思考模式，它将帮助你很多。有了HTML和CSS，你就可以编写你真正需要的东西，而不必一直有一个笨拙的表格。如果我冒犯了你，我很抱歉。但我建议你权衡一下表格和css布局的利弊。有很多不错的东西，比如响应式布局，你将无法充分利用这些旧技术

我的个人观点：

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

当然了，尤其是当

也就是说

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

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

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

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

换句话说，对于SEO和可访问性来说并不太好

但是，值得指出的是，要区分布局表和数据表

还有一些技术，比如

，可以帮助屏幕阅读器处理表格

3。如果要更改布局，基于表格的布局需要更改HTML标记

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

总之，我相信关于表格布局的指导方针和最佳实践比硬性规则更有用。这是一种平衡行为，总的来说，在某些情况下，表格可能是一个更好的选择。

请查看此问题。这将消除你的疑虑。太复杂了。。。我知道你的痛苦@Ruddy我们都因为现在的时间旅行而震惊；D@John我真的希望你是个巨魔；）你可以继续这样发帖，最后我已经完成了你应该为你的“cu”做的所有工作

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;
}