我将所有内容、页脚等设置为 100%，以便它们适合屏幕宽度。出于某种原因，虽然存在水平滚动条，但当我向右滚动时，内容仍然是屏幕的宽度，但我可以看到所有内容下方的一小部分主体。为什么会这样？
这是一个FIDDLE
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;
}
最佳答案
你的页脚有 padding:10px;
所以页脚的总宽度为 = 100% + 20px
您可以使用 box-sizing:border-box css 属性来防止 width:100%。
DEMO - 感谢 @Paulie_D
关于html - 正文莫名比设置为100%的内容宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25408859/