0

div を適切にレイアウトできません。高さ200px、幅100%のトップバーを作ろうとしています。その下には、幅 200 ピクセル、高さ 100% の左側のバーがあり、残りのスペースを占める右側のバーがあります。

ここで何が間違っていますか？

<!DOCTYPE html>
<html>
<head>
    <title>my view</title>

    <style>
        #tb {
            background-color:#cc0000;
            height:200px;
            width:100%;
            position:relative;
        }

        #lb {
            background-color:#00cc00;
            width:200px;
            height:100%;
            float:left;
        }

        #rb {
            background-color:#cccccc;
            height:100%;
            float:right;
        }
    </style>

</head>
<body>
<div id="page" style="width:100%;height:100%">

    <div id="tb" style=""/>
    <div id="lb"/>
    <div id="rb" style=""/>

</div>
</body>
</html>

div にいくつかのコンテンツを入れると、さらに悪くなります。

<div id="tb" style="">test</div>
    <div id="lb">test</div>
    <div id="rb" style="">test</div>
4

6 に答える 6

2

height: 100%またはwidth: 100%、残りのサイズではなく、親の全体的なサイズ、つまりドキュメント全体です。

これは、テーブルを使用して必要なものの例です。

これがdivの例です。

于 2012-06-28T13:33:25.023 に答える
0

柔軟なレイアウトが必要な場合は、ラッパーの div #page に最小幅と最大幅を指定すると、親の div #page の幅に応じてデザインの上部ヘッダーが調整されます。ラッパー div に高さを指定するのは得策ではありませんが、min-height を使用できます。

于 2012-06-28T13:39:18.747 に答える
0

ところで、divを自己終了に設定することはできません->ここに例がありますhttp://jsfiddle.net/QHTeS/2/

#tb {
    background-color:#cc0000;
    height:200px;
    width:100%;
}

#lb{
    float: left;
    background:red;
    width:200px;

}

#rb{

    background:green
}

</p>

于 2012-06-28T13:39:32.023 に答える
0

<div>s と CSSを使用する(つまり、テーブルではない) - レイアウトはこの方法では機能しません。(また、コメンターが指摘したように、一部の HTML は有効ではありません)。

フローティング要素の高さは、主にその中のコンテンツに依存します。「height」CSS 宣言が、期待どおりの意味であると考える罠に陥っています。(「学んだことを忘れる」)

通常の HTML/CSS フローでは、下の 2 つの div の高さが異なることを受け入れる必要があります。ただし、Faux Columnsのようなものを使用して、目的の効果を偽造することができます。

于 2012-06-28T13:43:44.453 に答える
-1

最初の div はペア要素なので<div></div>

div を使用した流動的なレイアウトは少しトリッキーです。

これはあなたのために働くはずです：

<!DOCTYPE html>
<html>
<head>
<title>my view</title>

<style>
    html, body {height: 100%;}
    #tb {
        background-color:#cc0000;
        height:200px;
        width:100%;
        position:relative;
    }

    #lb {
        background-color:#00cc00;
        width:200px;
        height:100%;
        float:left;
        margin-left: -200px;
    }

    #rb {
        background-color:#cccccc;
        height:100%;
        float:right;
        width: 100%;
    }

    #content {
        margin-left: 200px; 
        height: 100%;
    }
</style>

</head>
<body>
<div id="page" style="width:100%;height:100%">

    <div id="tb" style=""></div>
    <div id="content">
       <div id="lb"></div>
       <div id="rb" style=""></div>
    </div>

</div>
</body>
</html>
于 2012-06-28T13:43:28.537 に答える
-2

ページの正確な部分を埋めるには、代わりに絶対配置を使用する必要があります。これは、幅/高さの割合が親のサイズに関連するためです。

<!DOCTYPE html>
<html>
<head>
    <title>my view</title>

    <style>
        #tb {
            background-color:#cc0000;
            position:absolute;
            top:0px;
            left:0px;
            bottom:200px;
            right:0px;
        }

        #lb {
            background-color:#00cc00;
            position:absolute;
            top:200px;
            left:0px;
            bottom:0px;
            right:200px;
        }

        #rb {
            background-color:#cccccc;
            position:absolute;
            top: 200px;
            left:200px;
            bottom:0px;
            right:0px;
        }
    </style>

</head>
<body>
<div id="page" style="width:100%;height:100%">

    <div id="tb" style=""></div>
    <div id="lb"></div>
    <div id="rb" style=""></div>

</div>
</body>
</html>
于 2012-06-28T13:41:18.013 に答える