15

メインのdivの幅の外側に絶対に配置されたいくつかのデザイン要素で、中央のdivを「隣接」しようとしています。右側の要素が原因でスクロール バーが表示されますが、左側の要素では表示されません (IE6/7/8、Chrome、Firefox)。その水平スクロールバーを取り除くにはどうすればよいですか?

<html>
<head>
<style type="text/css">
    html, body { 
        height: 100%; 
        width: 100%;
        margin: 0;
    }

    body { text-align: center; }

    .wrapper {
        margin: 0 auto;
        position: relative;
        width: 960px;
        z-index: 0;
    }

    .main {
        background: #900;
        height: 700px;
    }

    .right, .left {
        position: absolute;
        height: 100px;
        width: 100px;
    }

    .right { 
        background: #090;
        top: 0px;
        left: 960px;
        z-index: 1;
    }

    .left {
        background: #009;
        top: 0px;
        left: -100px;
        z-index: 1;
    }           
</style>
</head>
<body>
    <div class="wrapper">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>
4

11 に答える 11

15

これは、IE6-9、FF3.6、Safari 5、および Chrome 5 で動作します。どの doctype を投げたかは問題ではないようでした (none、xhtml 1 transitional、html5)。これが役立つことを願っています。それは興味深い問題でした。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,
body { 
    margin: 0;
    padding: 0;
    text-align: center;
}

body {
    overflow: auto;
}
#container {
    min-width: 960px;
    zoom: 1; /*For ie6*/
    position: relative; /*For ie6/7*/
    overflow: hidden;
    margin: 0 auto;
}

#main {
    background: #cea;
    width: 960px;
    margin: 0 auto;
    height: 700px;
    position: relative;
    top: 0;
}

#right,
#left {
    position: absolute;
    height: 100px;
    width: 100px;
    top: 0;
    z-index: 100;
}

#right { 
    background: #797;
    right: -100px;
}

#left {
    background: #590;
    left: -100px;
}      
</style>
</head>
<body>
    <div id="container">
        <div id="main">
            <div id="left">left</div>
            <div id="right">right</div>
        </div>
    </div>
</body>
</html>
于 2010-07-18T00:53:25.670 に答える
5

body タグに overflow-x: hidden をスローすると、IE6/7 以外では機能しますが、これら 2 つのブラウザーの場合は、overflow-x: hidden を html タグにも追加する必要があります。

したがって、この調整で今あるものを使用してください。

html, body { 
        height: 100%; 
        width: 100%;
        margin: 0;
        *overflow-x: hidden;
    }

body { text-align: center; overflow-x: hidden; }

html の body 宣言で "*" ハックが使用されている理由は、IE8 が型にはまらないためであることに注意してください。これを使用しないと、IE8 は水平スクロールバーだけでなく、垂直スクロールバーも失います。どうしてか分かりません。しかし、その解決策は問題ないはずです。

于 2010-04-16T03:53:09.497 に答える
1

私はこれと同様の問題を抱えていて、上記の解決策がうまくいかないことがわかったので、完全に髪を引き裂いていました. メイン コンテナ div の外に div を作成し、min-width と max-width を使用して解決策を考え出すことで、これを克服します。

#boxescontainer {
    position: relative;
    max-width: 1100px;
    min-width: 980px;
}   

    #boxes {    
        max-width: 1100px;
        min-width: 900px;
        height: 142px;
        background:url(../grfx/square.png) no-repeat;
        background-position: center;
        z-index: 100;
    }

ただし、square.png 画像を div のサイズにする必要があることもわかったので、1100px の透明な png として作成しました。これが問題に対する私の解決策であり、うまくいけば他の人に役立つかもしれません。

余談ですが、右側と同じスクロールバーの問題がない絶対配置を使用した左側の画像もありました。どうやら、この件に関して私が行った調査とは、右側と左側が異なる性質を持っているようです。

overflow-x:hidden を使用している人に関しては、主にユーザーの水平スクロール機能を完全に奪っているため、この方法に反対する必要があります。Web サイトが 1024 ピクセルの解像度で表示されるように設計されている場合、水平方向にスクロールする機能を削除すると、解像度が 800 ピクセルのユーザーは Web サイトの半分を見ることができなくなります。

于 2011-03-17T01:51:00.767 に答える
0

あなたの体は相対的なものに設定されていません。

于 2010-02-18T04:56:50.847 に答える
0

これで何をしたいのかわからないので、代わりにボディに背景画像を設定することをお勧めします。

于 2010-03-01T09:58:47.073 に答える
0

IE7/IE6 では機能しないソリューションがありますが、他の場所では問題ないようです。

< > タグ#bodyInner内のすべてを囲むラッパー ( ) を作成します。body

次の CSS ルールを適用します。

#bodyInner {
    width:100%;
    overflow:hidden;
    min-width:960px;
    }

残念ながら、これを < body> 要素に適用することはできません。

于 2010-04-16T02:30:48.240 に答える
0

私が知っている古い質問ですが、他の誰かを助けるかもしれません。以下は James の応答を拡張したものですが、IE6/7/8/9、FF、および Webkit で動作します。はい、それは邪悪な表現を使用していますが、それを IE6 固有のスタイルシートに入れることができます。

#bodyInner {
       width: 100%;
       min-width: 960px;
       overflow: hidden;       
       width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) > 980 ? "100%" : (((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) #LT# 980 ? "960px" : "97.5%"));
}
于 2010-10-26T05:15:48.297 に答える
0

ページ言語が左から右の場合、左の適合しない要素はスクロールバーを引き起こしません。

これを試して：

<html dir="rtl">...</html>

これにより、ページのテキスト方向が右から左に変更され、右ではなく左の div によってスクロールバーが表示されます。

direction:rtl css プロパティでも同じことができます。

ページのレンダリングをテキストの方向から独立させたい場合は、ページ要素を別の方法で配置してこれを回避できます。

于 2010-07-19T22:28:35.773 に答える
0

すべての要素を div でラップし、その div 位置を相対的にしてオーバーフローを非表示にします。毎回この問題を解決します。:D

于 2010-06-23T21:10:13.937 に答える
0

ビューポートがメインとその右側のボックスよりも薄い場合にのみ、スクロールバーが表示されますよね? これは、コンテンツ オーバーフローに対するブラウザの予期される動作です。

何をしたいかによって (なぜこの状況でそれを消したいのですか?)、overflow:hidden を .wrapper に設定できます。それは常に非表示になります-他のイベントで動的に表示したい場合は、それでうまくいきます.

ただし、私が間違っていなければ、ビューポートの幅が 960px しかないときに表示したくないだけです。AFAIRは、いくつかのjs/jQueryなしではそれを行うことができません. 私の提案は実際には、特に JavaScript をいじりたくない場合は、このコンテンツをまったく表示したくない場合は、スクロールバーを狭い幅で受け入れてください。デザイナーとしてはいらいらするかもしれませんが、ほとんどの人はそれに気付かず、気にした人でもあなたのコンテンツにアクセスできます。これはメリットですよね?

于 2010-03-01T10:19:06.493 に答える
0

私もこのような解決策が必要でした.overlow-xが隠されている100％幅のラッパーを提案してくれたすべての人に感謝します. ただし、余分な #bodyInner div を追加する必要はないと思います。Safari、Opera、Firefox、Chrome、および IE8 で、幅とオーバーフロー属性を本文に直接適用してテストに成功しました。

于 2010-11-10T19:02:08.523 に答える