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

-1

我有一个960px的身体宽度，但是当我将固定标题div的宽度设置为100％时，它超过了960px的身体宽度并且宽度为1349px。固定div宽度100％，超过960px的身体宽度

我如何获得100％匹配960像素的身体宽度？

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; 
}

来源

2014-03-25 Sandbyte

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

来源

2014-03-25 07:08:39 n1kkou

为什么要给身体为960px？为内容部分定义一个div，即id =“wrapper”，给它们960px的宽度！？

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

来源

2014-03-25 07:07:33 chris

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

回答

相关问题