css - 将此表格布局转换为 DIV 布局

Question

谁能帮我设计一个看起来像这个表格布局的 DIV/CSS 布局？

<table id="container">
    <tr>
        <td colspan="2" id="header">
            Header
        </td>
    </tr>
    <tr>
        <td rowspan="2" id="navBar">
            Navigation bar
        </td>
        <td>
            Main content
        </td>
    </tr>
    <tr>
        <td id="footer">
            Footer
        </td>
    </tr>
</table>

表格的CSS在这里:

<style type="text/css">
    #container
    {
        width: 100%;
        min-width: 800px;           
        border-collapse: collapse;
    }

    #header
    {
        height: 78px;
        background-color: Orange;
    }

    #navBar
    {
        width: 200px;
        background-color: Gray;
    }

    #footer
    {
        height: 50px;
        background-color: Silver;
    }
</style>

我遇到了严重的问题，因为我不能:

• 让父级 div 自动增长到它的 child 的高度。 (#容器)
• 使所有子 div 都均匀 增长到其父级高度的大小。 (#navBar，#main)
• 始终将一个 div 置于其父元素的底部 (#footer)

我尝试了一些 CSS 生成器但没有成功。

这里的关键是 rowspan 很难在 CSS/div 中模拟(对于经验丰富的编码人员，没有经验的设计师)

Answer 1

你可以那样做..

HTML

<div id="container">
<div id="header">Header</div>
<div id="navBar">Navigation bar</div>
<div id="content-here">content here
<div id="footer">Footer</div>
</div>
</div>

CSS

<style type="text/css">
    #container
    {
        width: 100%;
        min-width: 800px;           
        border-collapse: collapse;
    }

    #header
    {
        height: 78px;
        background-color: Orange;
    }

    #navBar
    {
        width: 200px;
        background-color: Gray;
    }

    #footer
    {
        height: 50px;
        background-color: Silver;
    }
</style>