Question

我的主体宽度为960px，但是当我将固定标头div的宽度设置为100％时，它超过了960px的主体宽度，宽度为1349px。

如何让100％与960px的身高相匹配？

HTML

<body>
<header>
    <div class="banner">
    <div class="logo">
         <h1>CML International</h1>
    </div>
        <nav class="navigation">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </nav>
    </div>
</header>
</body>

CSS

/* FONTS
============================*/
@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,500,700);



/* BODY
============================*/
* {
  font-family: 'Ubuntu', sans-serif;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
}

body {
  width: 960px;
  height: 1000px;
  margin: 0 auto;
  margin-top: 80px;
}



/* BANNER
============================*/
.head {
  width: 960px;
}

.banner {
  width: 100%;
  position: fixed;
  top: 0;
  height: 80px;
  background-color: #111;
  z-index: 100;
}

.logo,
.navigation { 
  position: absolute;
}

.logo,
.navigation li {
  display: inline-block;
}

.logo {
  left: 20px;
  top: 21.5px;
}

.logo h1 {
  margin-top: 0;
  margin-bottom: 0;
}

.navigation {
  right: 20px;
  bottom: 31px;
}

.navigation li {
  margin-left: 15px;
}

.navigation li a {
  text-decoration: none;
}

.navigation li a,
.logo {
  color: #fff;
}

Answer 1

为什么给身体960px？定义一个div，即id =＆＃34;包装＆＃34;对于内容部分，给他们宽度为960px！？

<body>
    <header>
        ...
    </header>
    <div id="wrapper" style="width:960px; etc">
        // content here
    </div>
</body>

Answer 2

在这种情况下，

fixed位置将占据html标记的100％宽度。在这种情况下，您需要使用像素大小。此外，要使横幅与中心保持对齐，请使用margin-left:auto和margin-right:auto

固定div宽度100％，超过960px的体宽

2 个答案: