使用内容div填充可用空间的页眉/内容页面

-4

所以我试图创建一个简单的页眉/内容布局，其中内容部分延伸到窗口的底部。用CSS做这件事看起来是不可能的，因为考虑到布局的简单性，不会引入太多的复杂性。使用内容div填充可用空间的页眉/内容页面

请告诉我一个单一的原因，为什么我不应该这样做

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而不是桌子是最新的时髦事情，你不希望我们被其他网页设计师嘲笑吗？”

来源

2014-02-05 John

Sooo ..表格布局...是的...不要这样做。（是的，我读过这个问题，只是不得不说。） – Ruddy

“最新潮流的事情”。 :)等等，是2003年吗？这是一个愚蠢的拖钓岗位。如果你想使用表格，请将自己击倒。 – Will

Ruddy如何表CSS的东西不能做或需要荒谬愚蠢的伎俩做？ – John

我个人的看法：

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

肯定是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.表可以与搜索引擎索引，屏幕阅读器和其他自动网页解析

换句话说，搜索引擎优化和可访问性没有那么好干涉。

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

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

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

此外，它更好，更概念纯粹 - 通常更易于维护 - 仅将HTML用于内容/语义，因此您可以离开当您进行设计更改时，单独使用标记。但实际上，通过重新设计，您通常需要对HTML进行更改。总而言之，我认为准则和最佳实践比关于表格布局的硬性规定更有用。这是一种平衡的行为，并且在某些情况下，表格可以是一个更好的选择。

来源

2016-01-19 08:58:37 jkdev

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

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

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

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

让构建您的文档：

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

我们有一个标题和一个div宽度的类名“静态内容”布局的原因。您可以将此名称更改为任何您想要的内容（无空格并开始输入字母字符），也可以添加多个类，并用空格分隔。

这里是一些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更加强大且易于使用。例如，新的显示：网格;属性。如果你真的给了CSS一个机会，并尝试添加一个关于盒子模型的新思维模式，它会帮助你很多。使用HTML和CSS，您可以直接编写您所需要的内容，而不必一直拥有笨拙的表格。如果我冒犯了你，我很抱歉。但我建议你权衡表与CSS布局的利弊。有相当不错的东西，周围像自适应版式，你将无法充分利用这些宽度旧技术

来源

2014-02-05 13:45:40

底部计数从窗口的底部改为。你去那里：http://jsfiddle.net/rC66e/4/ 不行，添加更多的诡计。 – John

你倒了我的阿韦瑟？我现在不再回答你了。看最后一次编辑。愿IE6的力量永远对你有利 –

@NicoO不要因为你有一个赞成票而感到不安，因为我会为你的努力付出努力，但仇恨者会恨，所以你不必停止回答。 .. –

使用内容div填充可用空间的页眉/内容页面

回答

相关问题