包含内容div的页眉/内容页面填充可用空间 [英] Header/content page with content div filling available space

问题描述

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

请告诉我为什么我不应该这样做这样做

  body，html {height：100％;填充：0;保证金：0; } 
 #h {height：150px; } 
 #tbl {height：100％; } 
 
< table id =tblcellpadding =0cellspacing =0> 
< tr> 
< td id =h>标题< / td> 
< / tr> 
< tr> 
< td>内容< / td> 
< / tr> 
< / table> 
  

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

解决方案

我个人认为：

像使用咖啡保持清醒。不要经常这样做。也许曾经有一段时间。

当然我们不应该为使用基于表格的布局的人烦恼，特别是当没有健全的，跨浏览器的方式在CSS中执行特定的布局。

那说......

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

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

对于非常简单的设计，基于表格的布局可能适用于任何屏幕尺寸。

<强> 2。表格可能会干扰搜索引擎索引，屏幕阅读器和其他自动网页解析 p 换句话说，对于搜索引擎优化和可访问性来说并不那么好。

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

还有一些技术，如< table role =presentation> ，以帮助屏幕阅读器处理表格虽然那些黑客行为可能会变得复杂。

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

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

So I'm trying to create a simple header/content layout where the content part extends to the bottom of the window. Doing it with CSS looks impossible, at without introducing too much complexity considering how simple is this layout.

Please tell me a SINGLE reason why I shouldn't do this

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>

And don't tell me about semantics and how tables weren't made for layout. It seems most web designers today are masochists who spend hours everyday trying to build simple layouts in very complex ways because they like to torture themselves with things that don't matter. I can hear you already saying "But... but... john using divs instead of tables is the latest hip thing to do, you don't want us to be mocked by the other web designers do you?"

解决方案

My personal view:

Using tables for layout is like using coffee to stay awake. Don't do it too often. Maybe once in a while.

And certainly we shouldn't hassle people who use table-based layouts, especially when there's no sound, cross-browser way to do a particular layout in CSS.

That said...

1. Tables make it harder to design for multiple screen sizes at once

Responsive layout is important these days. Having different CSS rules for different viewport sizes, applied to the same HTML code, is a good way to adapt a site to all screens.

For very simple designs, though, a table-based layout may work at any screen size.

2. Tables can interfere with search engine indexes, screen readers, and other automatic web page parsing

In other words, not so good for SEO and accessibility.

However, it's worth pointing out that Google has recently been optimizing its search algorithm to distinguish between layout tables and data tables.

And there are some techniques like <table role="presentation"> to help screen readers handle tables, although those hacks can get complicated.

3. Table-based layouts require changing the HTML markup when you want to change the layout

Again, it's nicer and more conceptually pure -- and often more maintainable -- to use HTML for content/semantics only, so you can leave the markup alone when you make design changes. But practically speaking, in a substantial redesign you'd often need to make changes to the HTML anyway.

In sum, I believe that guidelines and best practices are more useful than hard-and-fast rules regarding tables for layout. It's a balancing act, and there are situations where tables can be, overall, a better choice.

这篇关于包含内容div的页眉/内容页面填充可用空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！