0

コーディングしている CSS で問題が発生しています。

ウィンドウを最小化するたびに水平スクロールバーが表示され、このスクロールバーの問題は、ウィンドウを最大化しても消えないことです。

私は何が間違っているのでしょうか？

前もって感謝します

CSS

body {
    background-color: #C5C5C5;
    margin-left: 0px;
    margin-top: 0px;
}

html {
    overflow-y: scroll;
}

.header_bg {
    background-color: #F1F1EE;
    padding: 10px 10px 10px 10px;
    border-top: 2px solid #738ebe;
    width: 100%;
}

.header_main {
    width: 960px; // would it be better to change this to width: 80%
    margin:0 auto;
    overflow: hidden;
}

.header_main img {
    float: left;
}

.header_main div {
    float: right;
}

HTML

<div class="header_bg">
    <div class="header_main">
        <img src="resources/img/login_logo.png" width="163" height="66" />
        <div>Already a member? Sign in</div>
    </div>
</div>​
4

1 に答える 1

1

これ：

.header_bg {
    background-color: #F1F1EE;
    padding: 10px 10px 10px 10px;
    border-top: 2px solid #738ebe;
    width: 100%;
}

はコンテナの計算された幅に追加されます。つまり、bodyこれheader_bgは に合わせて引き伸ばされ100%ます。そのため、パディングはbodyビューポートを超えて s の寸法だけ移動し、 がトリガーされscroll-xます。

それを削除すると、スクロール バーが消えます。

padding: 10px 0;

編集: http://jsfiddle.net/userdude/782fc/2/

フル: http://jsfiddle.net/userdude/782fc/2/embedded/result

または、代わりに、 を付けて、自動的widthに中央に配置します。bodymargin: 0 auto;

body {
    background-color: #C5C5C5;
    width: 1024px;
    margin: 0 auto;
}

...

.header_bg {
    background-color: #F1F1EE;
    padding: 10px;
    border-top: 2px solid #738ebe;
    width: 100%;
}

.header_main {
    width: 100%;
    margin:0 auto;
    overflow: hidden;
}

編集: http://jsfiddle.net/userdude/782fc/4/

フル: http://jsfiddle.net/userdude/782fc/4/embedded/result/

于 2012-06-30T18:12:21.390 に答える