看看这个小提琴这里的CSS和HTML视图。
代码是：
<body>
<div class="header-bar" id="header-bar">
<div class="title-bar" id="title-bar">
<table id="header-table" class="header-table" width="100%">
<tr>
<td>
<div class="site-title" id="site-title">Site Title</div>
</td>
</tr>
<tr>
<td>
<div class="site-tagline" id="site-tagline">Site Tagline</div>
</td>
</tr>
</table>
</div>
<div class="header-login-bar" id="header-login-bar">
<div class="header-login-form" id="header-login-form">
<table>
<tr>
<th>Name</th>
<td><input type="text" name="user-email"/></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" name="user-pass"/></td>
</tr>
</table>
</div>
<div class="header-logged-in" id="header-logged-in">
Welcome {$user}.
<a href="#">Dashboard</a>
<a href="#">Logout</a>
</div>
</div>
</div>
<div id="content-bar" class="content-bar">
This is the content part
</div>
</body>
具有id标头栏的div必须包含此段中绘制的所有元素，但我不明白为什么，此段拒绝运行。我是设计新手，使用更多的Dreamweaver等图形工具以及代码和设计视图来制作这些东西，即使那里的内容放错了地方。并且在浏览器中，带有id标头栏的div根本不显示任何文本。带有ID标头栏的div在Chrome的Inspect元素中报告高度为0px。
添加overflow:auto到标题栏div。当任何元素的子元素浮动时，它们将从文档的常规流中删除，这就是标题栏div报告高度为零的原因。添加overflow:auto到父div（标题栏）将恢复预期的行为。