我觉得这很愚蠢,但这是一个非常简单的问题,不明白如何解决.在下面的代码中,为什么容器,主要和辅助div扩展到标题之外？我知道它是因为我已经分配给容器的填充而发生的,但我已经为html元素分配了最大宽度. header元素遵循最大宽度,但容器及其子div不是.我在这里看过类似的问题,但没有看到任何我认为与我的特殊情况相关的问题.这里发生了什么？
谢谢.
的test.html
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="../reset.css" />
<style type="text/css">
html {
max-width: 960px;
margin: 0 auto;
position: relative;
}
header {
height: 2.5em;
background: #2a3744;
color: #fff;
}
body {
font-size: 100%;
-moz-Box-sizing: border-Box;
-webkit-Box-sizing: border-Box;
Box-sizing: border-Box;
}
.container {
width: 100%;
padding: 1em;
margin: 0 auto;
background: #ccc;
}
.main { background: #cf6; }
.secondary { background: #fc6; }
</style>
</head>
<body>
<header role="banner">
header
</header>
<div class="container">
<div class="main">
main
</div>
<div class="secondary">
secondary
</div>
</div>
</body>
</html>
