Question

我将所有内容，页脚等设置为100％，以便它们适合屏幕的宽度。出于某种原因，虽然存在水平滚动条，但当我向右滚动时，内容仍然是屏幕的宽度，但我可以看到所有内容下面的一部分正文。为什么会发生这种情况？

HTML

<body>
    <div id="wrapper">
    <header>
        header
            <nav>
                nav
            </nav>
    </header>
<section id="intro">
</section>

<footer>
    Footer
</footer>
    </div>
</body>

CSS

@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'futura';
    src:
    local('futura'),
    local('futuraextended'),
    url('_fonts/FuturaExtended.ttf')
    format('truetype');
}
html {
    margin:0;
    padding:0;
    height:100%;
    width:auto;
    background:purple;
}
body {
    background:pink;
    margin:0px;
    padding:0px;
    font-family: 'futura', sans-serif;
    height:100%;
    width:auto;
}
#wrapper {
    min-height:100%;
    width:100%;
    position:relative;
    background:blue;
}
ul {
    padding:0;
    margin:0;
}
li {
    list-style:none;
    padding:0;
    margin:0;   
}
header {
    height:200px;
    position:fixed;
    z-index:100;
    width:100%;
    background:pink;
}
#logo {
    height:200px;
    width:355px;
    float:left;
    background:url(../_images/ODA-logo-BW.png);
}
nav {
    float:left;
    height:200px;
    width:180px;
    background:yellow;
    padding:0px;
    margin:0px;
    color:black;
    text-transform:lowercase;
}
nav ul {
    margin:0px;
    padding:0px;
}
nav li {
    list-style:none;
    background:#adadad;
    padding-top:16.3px;
    padding-bottom:16.3px;
    padding-left:26px;
    font-size:26px;
}
nav li:hover {
    background:#bebebe; 
}
a {
    text-decoration:none;
    color:white;
}
#intro {
    width:auto;
    height:850px;
    background-image:url(../_images/Sketch-2.png);
    background-repeat:no-repeat;
}
footer {
    width:100%;
    height:20px;
    position:absolute;
    bottom:0;
    left:0;
    text-align:center;
    padding:10px;
    background:red;
    opacity:.9;
}

Answer 1

您的页脚有padding:10px;

因此页脚的总宽度为= 100% + 20px

您可以使用box-sizing:border-box css属性来阻止width:100%。

DEMO - 感谢 @Paulie_D

Answer 2

玛丽的回答是正确的。问题在于页脚填充。但您也可以通过将填充设置为：padding:10px 0;

来解决此问题

第一个参数是顶部和底部，第二个参数是左右。 http://jsfiddle.net/e9g8s820/3/

身体莫名其妙地比设定为100％的内容更宽

2 个答案: