0

私は次のDIV構造を持っています:

<style>
#header{border-bottom:1px solid blue;}
#footer{botter-top:1px solid blue;}
#header,#footer{height:15%;}
#content{height:70%;}
#header,#footer,#content{width:100%;}
</style>

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

私が気づいたのは、デスクトップ ブラウザーでは、100% から 2px+ のオフセットで予想されるオーバーフローがあることです。 ただし、モバイル ブラウザーでは、オーバーフロー/スクロールはないようです。

  • モバイル デバイスは、100% の高さ/幅の計算の一部として境界線をカウントしますか?

もしそうなら：

  • デスクトップ ブラウザーの CSS を介してこの動作を呼び出す方法はありますか?
  • モバイル ブラウザの CSS を使用してこの動作を逆にする方法はありますか?
4

2 に答える 2

1

デフォルトのすべてのブラウザー (モバイルおよびデスクトップ) はbox-sizing、2px を追加する必要があります。

このルールを追加してみてください:

#header,#footer,#content { box-sizing:border-box; }

あなたのCSSに。

  • デスクトップ ブラウザーの CSS を介してこの動作を呼び出す方法はありますか?

その必要はありません。それはすでにデフォルトの動作です。

  • モバイル ブラウザの CSS を使用してこの動作を逆にする方法はありますか?

はい、上記のルールを追加することにより:-)またはこの回答の下部にある回避策を追加してください。

モバイル デバイスのみをターゲットにする場合は、メディア クエリでルールをネストします。

@media only screen and (max-device-width: 480px){
    #header,#footer,#content { box-sizing:border-box; }
}

IE8 で動作させるには、Respond.jsを使用します。しかし、このメディア クエリしかない場合は、おそらく実際には必要ありません (単純に無視されます)。

このbox-sizingプロパティはブラウザー (IE8+、その他すべて) で非常によくサポートされています。IE7 のフォールバックは必要ないと思います (世界中のユーザーは 2% 未満です)。

問題のもう 1 つの非常に簡単な回避策は、1 ピクセルの負のマージンを追加することです。

#footer,#content { margin-top:-1px; }

これにより、モバイル デバイスおよび既知のブラウザの問題が解決されます。

于 2012-10-01T23:49:05.360 に答える
1

そうです、デスクトップ ブラウザでは 2 ピクセルのオフセットが表示されます。これは、仕様で親 + 境界線 + マージンの 100% を取得すると記載されているためです。モバイル ブラウザは影響を受けていないようですが、ほとんどの場合、スクロールをなくすためにコンテンツをウィンドウに自動調整しようとしているためです。

2 つの css3 修正があります。1 つ目は、新しい box-sizing プロパティを使用することと、border-box に設定することです。2 つ目は、フレックスボックス モデルを使用することです。残念ながら、古いブラウザーはこれらのソリューションのいずれもサポートしていない可能性があります。

したがって、ボックスサイジングを使用しますが、IE7とその逆を考慮してIE条件ステートメントを入れ、javascriptまたはcssハックを使用して修正します。

編集

ボックスサイジングを使用したソリューションは次のとおりですhttp://jsfiddle.net/aaFHZ/

body, html {height:100%; width: 100%;}
#header{border-bottom:1px solid blue;}
#footer{border-top:1px solid blue;}
#header,#footer{height:15%;}
#content{height:70%;}
#header,#footer,#content{width:100%; box-sizing:border-box;}

ここにフレックスボックスを使用したソリューションがあります（注：これは最新のブラウザーでのみ機能します）http://jsfiddle.net/YkSYN/1/

<style>
body, html {height:100%; width: 100%;}
#header{border-bottom:1px solid blue;}
#footer{border-top:1px solid blue;}
#header,#footer {
    -webkit-box-flex: 15;
    -moz-box-flex: 15;
    box-flex: 15;}
#content {
    -webkit-box-flex: 70;
    -moz-box-flex: 70;
    box-flex: 70;}
#header,#footer,#content{width:100%;}
#wrapper {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: box;
    box-orient: vertical;
    width: 100%; 
    height:100%;}
</style>
<div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>​
于 2012-10-01T23:55:02.680 に答える