1

私はウェブサイトhttp://www.swiftkey.netに出くわしました。

ワイドスクリーンでは、コンテンツ領域の側面に灰色の背景が表示されます。通常の（1024x768）では、灰色のバーはありません。

彼らはどのようにしてこの効果を達成しますか？

ファイアバグを使用して、私はこれを行う可能性があると思うことを解読することができました：

.w1 {
    float: left;
    width: 1600px;
    position: relative;
    left: 50%;
}
.w2 {
    float: left;
    width: 1600px;
    position: relative;
}

私はCSSとHTMLの経験がありますが、特にw2がw1の中にあることを考えると、上記のコードは私には少しわかりにくいものです。

4

2 に答える 2

2

私はあなたが話している灰色のバーが2番目のサンプル画像に示されているものであるという仮定の下でこれに答えています：

サンプルスクリーンショット1 サンプルスクリーンショット2

簡単な答えは、ページが水平方向に中央に配置された静的な最大幅のラッパーを使用することです。

#wrapper {
    max-width: 1000px;
    margin: 0 auto; //centers a block element
}

灰色のバーは、<body>または<html>要素に背景色を付けることによって作成されます。

body {
    background-color: #888;
}

これらのスタイルが具体的にどこに設定されているかを確認するためにソースをチェックしていません。読者のための演習として残しておきます。

于 2012-09-25T18:26:54.423 に答える
0

これは、javascript画面オブジェクトで達成する必要があります

var scr=window.screen;
var availwidth=scr.availWidth;
var width=scr.width;
var availh=scr.availHeight;
var height=scr.height;

availWidthとavailHeightは、タスクバーやスクロールバーなどを考慮して、実際に使用可能な幅と高さを示します。幅と高さは、実際の画面解像度を示します。次に、変数にアクセスして、レイアウトのタイプを決定します。

ただし、中央に調整するのは簡単です

div
{
width:1024px;
position:absolute;
left:50%;
margin-left:-512px;
}

javascriptの画面幅のトレースは、より多くの制御オプション用です

于 2012-09-25T18:10:39.897 に答える