1

最初にペイントで準備された画像を参照してください。

このタイプの 4 つの分割を持つ柔軟なページを設計したいと考えています。したがって、モニター画面またはブラウザーのサイズを変更すると、ウィンドウのサイズが自動的に変更されます。この 4 つのボックスはすべて、ブラウザー画面と任意のモニター サイズに 100% 適合し、スクロール バーが表示されないようにする必要があります。CSSスタイルシートでコーディングする方法を教えてください。

これが私のコードです。html: 

<div id="bottomleft">
</div>

<div id="topleft">
</div>

<div id="topright">
</div>

<div id="bottomright">
</div>

</div>
</body>

CSS:

    *
    {
    margin: 0;
    padding: 0;
    }
    #wrapper
    {
    margin: 0px auto;
    height: 100%;
    width: 100%;
    }
    #bottomleft
    {
    position:relative;
    height: 50%;
    width: 50%;
    border: 1px solid black;
    float: left;
    }
    #topleft
    {
    position:relative;
    height: 50%;
    width: 50%;
    border: 1px solid black;
    float: right;
    }
    #topright
    {
    position:relative;
    height: 50%;
    width: 50%;
    border: 1px solid black;
    float: left;
    }
    #bottomright
    {
    position:relative;
    height: 50%;
    width: 50%;
    border: 1px solid black;
    float: right;
    }
4

2 に答える 2

2

デモ

HIbody, html height 100%;はCSSで次のように定義します

あなたbox-sizingのid

body, html{
height:100%;
}
#bottomleft, #bottomright, #topright, #topleft{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}

デモ

于 2012-10-10T06:01:30.830 に答える
0

このメタをすべてのデバイスのヘッドタグで使用し、他のcssを任意のウィンドウ幅で使用します

このメタは、最小幅のشrbitraryを使用してcssをロードするためのデバイスおよびリンクタグに使用されます。

<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />

よろしくお願いします

于 2012-10-10T06:10:56.817 に答える