固定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的身體寬度

回答

相關問題