3

看看这个小提琴这里的 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 为 header-bar 的 div 必须包含该段中绘制的所有元素，但我不明白为什么，该段拒绝运行。我是设计新手，使用更多的图形工具（如 Dreamweaver）和代码和设计视图来制作这些东西，即使内容放置完全错误。在浏览器中，带有 id header-bar 的 div 根本不显示任何文本。带有 id header-bar 的 div 在 Chrome 的 Inspect 元素中报告高度为 0px。

4

1 回答 1

7

添加overflow:auto到您的标题栏 div。当任何元素的子元素浮动时，它们将从文档的正常流程中删除，这就是为什么您的 header-bar div 报告高度为零的原因。添加overflow:auto到父 div（标题栏）可恢复预期行为。

jsFiddle 示例

于 2013-06-04T14:55:57.317 回答