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%，因此填充将bodys 尺寸移动到视口之外，从而触发scroll-x。

删除它，您的滚动条就会消失：

padding: 10px 0;

编辑：http: //jsfiddle.net/userdude/782fc/2/

完整：http: //jsfiddle.net/userdude/782fc/2/embedded/result

或者，或者，将其width放在bodywith上margin: 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 回答