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 に答える