1

谁能帮我设计一个看起来像这个表格布局的 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 自动增长到它的孩子的高度。（＃容器）
  • 使所有子 div均匀增长到其父高度的大小。（#navBar，#main）
  • 始终将 div 定位在其父级的底部 (#footer)

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

这里的关键是行跨度很难在 CSS/div 中模拟（对于经验丰富的编码器，没有经验的设计师）

4

1 回答 1

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>
于 2013-01-29T11:35:14.937 回答