Question

我在编写一些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>

Answer 1

此：

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

添加到其容器的计算宽度，即body，header_bg拉伸以适合100%，因此填充正在将body的尺寸转移到视口，从而触发scroll-x。

将其删除，滚动条消失：

padding: 10px 0;

修改：http://jsfiddle.net/userdude/782fc/2/

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

或者，将width放在body上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/

最小化窗口时水平滚动条错误

1 个答案: