0

少し基本的なWebページのレイアウトに取り組んでいます。問題は、画面が 1050 ピクセル (1050 ピクセルはラッパーの幅) よりも近い場合、ブラウザーがラッパーからオーバーフローする要素を無視せず、水平スクローラーを追加しないことです。コードをチェックアウト:

HTML 

<body>
    <div id="wrapperMain">
        <div id="headerLeftOverflow"></div>            
        <div id="headerRightOverflow"></div>
        <div id="headerMain"></div>
    </div>
</body>

CSS

body {    
    margin: 0;
    padding: 0;
    background-color: #f9eacc;
    text-align: center;
    font-family: Tahoma , sans-serif;
    color: #333333;

}

div#wrapperMain {
   width:  1050px;
   margin: auto;
   position: relative;
   height: 800px;
}

div#headerMain {
    position: absolute;
    top: 0;
    left: 0;
    width: 1050px;
    height: 565px;
    background-image: url("../images/header.png");
    background-repeat: no-repeat;
}

div#headerLeftOverflow {
    position: absolute;
    width: 271px;
    height: 565px;
    background-image: url("../images/headerLeftOverflow.png");
    top: 0;
    left: -271px;    
}

div#headerRightOverflow {
    position: absolute;
    width: 277px;
    height: 565px;
    background-image: url("../images/headerRightOverflow.png");
    top: 0;
    left: 1050px;   
}

誤解しないでください。

画面が十分に広い場合、ID「headerRightOverflow」のdivが表示されるようにします。奇妙なのは、id が「headerLeftOverflow」の div が適切に機能することです (画面が 1050 ピクセルより近い場合、div は非表示になります)。

4

3 に答える 3

1

スクロールバーが消えるようにする迅速な解決策が必要な場合は、追加してください

body{overflow-x: hidden;}

しかし、position: absolute を使わずに、単純にコードを異なる方法で記述する必要があると思います。

于 2012-06-08T11:53:33.650 に答える
0

最善の方法は、CSS3 メディア クエリを使用することです

/* Greater than standard 1050px */
@media only screen and (min-width: 1050px) {
//Your Code here that has to be performed when the screen size is more than 1050
}

または、 modernizrなどの Javascript ライブラリを使用できます。

Modernizr は、訪問者が使用するブラウザーやデバイスに関係なく、正確に機能する最高の Web サイトとアプリケーションを作成するための出発点です。

于 2012-06-08T12:09:33.340 に答える
0

この方法でwrappermain tiのcssを修正します

div#wrapperMain { 
overflow:hidden;
   width:  1050px; 
   margin: auto; 
   position: relative; 
   height: 800px; 
}
于 2012-06-08T11:31:48.163 に答える