2

レスポンシブ Web サイトを構築しています。デフォルトの高さをpxで設定したくありませんが、このようにしたいです。これはレイアウトの上部のみになります。例: prowly.com。

ここに画像の説明を入力

そして私のフィドル：

http://jsfiddle.net/QVxW8/1/

        html, body {
            margin: 0;
            padding:0;
        }
        div#handler {
            width: 100%;
            height: 110%;
            display:block;
        }
        div#content {
            width: 100%;
            height:100%;
            background: red;
        }
        div#content2 {
            width: 100%;
            height: 10%;
            background: blue;
        }

HTML

<body>
    <div id="handler">
        <div id="content">I want to 100% height of browser</div>
        <div id="content2">I want 10% of height browser</div>
    </div>
</body>

Ps。私も見たように、高さの 100% は Safari iPhone と Opera Mobile でバグがあるので、どうすればよいかわかりません。もちろんJSも使えますが、他に方法はありますか？

4

4 に答える 4

2

このようにボディを設定する必要があります

html, body {
                margin: 0;
                padding:0;
                position:absolute;/* this is very important*/
                bottom:0;
                top:0;
                right:0;
                left:0;
            }

デモ: http://jsfiddle.net/QVxW8/5/

またはこのように：

html, body {
                margin: 0;
                padding:0;
                position:absolute;/* this is very important*/
                left:0;
                top:0;
                width:100%;
                height:100%;
            }

正しい値を使用するには

*{
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

または、コードを次のように変更します

html, body {
                margin: 0;
                padding:0;
                height:100%;
            }

デモ: http://jsfiddle.net/QVxW8/6/

于 2013-08-26T17:25:04.353 に答える