背景顏色位置

我設置的背景顏色未應用於整個內容區域（內容包裝）。它只適用於大約一半的頁面。 JsFiddle 背景顏色位置

<!DOCTYPE html> 
<html lang="en-US">  
<head> 
    <link rel="stylesheet" href="sidenav3.css" type="text/css"/> 
    <title>web page</title> 
</head> 

<body> 

<div id="page-wrapper"> 
    <div id="header"></div> 
     <div id="content-wrapper"> 
     <div id="content"> 

     <h1>Title</h1>   

<p> 
Ham hock turkey flank corned beef beef brisket, chicken tri-tip sirloin ham sausage bresaola drumstick short loin speck. Kielbasa speck chicken flank bresaola, meatloaf frankfurter. Andouille pork chop spare ribs fatback pork loin. Strip steak meatball ribeye, turducken boudin shoulder fatback tongue cow meatloaf ground round short loin. Tri-tip prosciutto chuck capicola jerky. Pastrami chuck turkey, brisket pork belly hamburger corned beef speck. 
</p>&nbsp 

<p> 
T-bone frankfurter meatloaf, ham jerky pork boudin tail short loin. Filet mignon salami sirloin, leberkas sausage short loin pork. Prosciutto biltong kielbasa turkey ribeye brisket. Bacon swine shank, frankfurter boudin short ribs drumstick tongue tail fatback. 
</p>&nbsp 

<p>Turkey t-bone beef, tenderloin pig drumstick biltong ham turducken. Turducken kielbasa spare ribs t-bone tri-tip. Strip steak speck flank tenderloin. Prosciutto spare ribs flank, turkey rump beef ribs cow biltong tenderloin ham hamburger leberkas pastrami. Leberkas turkey flank capicola short loin kielbasa. Sausage meatloaf shankle venison flank ribeye tail strip steak. Turducken salami rump cow corned beef. 
</p>&nbsp 

<p>T-bone frankfurter meatloaf, ham jerky pork boudin tail short loin. Filet mignon salami sirloin, leberkas sausage short loin pork. Prosciutto biltong kielbasa turkey ribeye brisket. Bacon swine shank, frankfurter boudin short ribs drumstick tongue tail fatback. 
</p>&nbsp 

<p>T-bone frankfurter meatloaf, ham jerky pork boudin tail short loin. Filet mignon salami sirloin, leberkas sausage short loin pork. Prosciutto biltong kielbasa turkey ribeye brisket. Bacon swine shank, frankfurter boudin short ribs drumstick tongue tail fatback. 
</p>&nbsp    

</div><!-- END content--> 

<div id="menu-wrap"> 
    <div id="menu"> 
      <ul> 
      <li><a href="#">index</a> 
        <ul> 
         <li><a href="#">Item one</a></li> 
         <li><a href="#">Item two</a></li> 
         <li><a href="#">Item three</a></li> 
         <li><a href="#">Item four</a></li> 
         <li><a href="#">Item five</a></li> 
         <li><a href="#">Item six</a></li>    
         <li><a href="#">Item seven</a></li>   
        </ul> 
       </li> 
      </ul> 
    </div><!-- END menu--> 
</div> <!-- END menu-wrap-->   

    </div><!-- END content-wrapper-->  
    <div id="footer"></div> 
</div><!-- END page-wrapper--> 
</body> 
</html>

的CSS（內容的位置的jsfiddle以外居中）

span.anchor { 
    display: block; 
    height: 50px; 
    margin-top: -50px; 
    visibility: hidden; 
} 

ul {padding: 0; margin: 0;} 
body {padding:0; margin:0;} 

h1 { 
font-size:34px; 
text-align: center;  
} 

#header { 
    height: 35px; 
    width: 100%; 
    background-color: #336699; 
    position: fixed; 
    top: 0px; 
    z-index: 10; 
} 

#content-wrapper { 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    background: #f6f6f6; 
} 

#content { 
    width: 90%; 
    height: 100%; 
    float: right; 
    margin-top: 70px; 
    margin-bottom: 50px; 
    padding-right: 75px; 
    line-height: 2.5em; 
    font-size: 13pt; 
} 

#menu ul li { 
list-style-type: none; 
} 

#menu ul ul { 
    display:none; 
    position: fixed; 
} 

#menu ul ul a { 
} 

#menu ul a { 
    text-decoration: none; 
    color: black; 
} 

#menu ul li:hover ul { 
    display:block; 
    left: 0; 
    line-height: 20px; 
    width: 220px; 
    height: 750px; 
    background: #CCC; 
    border-top-right-radius:1em; 
    border-bottom-right-radius:1em; 
    padding-left: 22px; 
    text-align: left; 
    line-height: 35px; 
    padding-top:20px; 
    font-size: 14px; 
    border:1px solid grey; 
    box-shadow: 3px 3px 4px #888888; 
} 

#menu-wrap { 
    position:fixed; 
    top: 80px; 
    width: 55px; 
    height: 22px; 
    border-top-right-radius: 6px; 
    border-bottom-right-radius:6px; 
    background: grey; 
    text-align: center; 
    padding-top: 3px; 
    z-index: 0; 
    box-shadow: 2px 2px 3px #888888; 
} 

#footer { 
    height: 10px; 
    width: 100%; 
    background-color: green; 
    position: fixed; 
    bottom: 0px; 
}

來源

2012-12-29 mike

background：＃f6f6f6;無論我在哪裏應用它，它都不會覆蓋整個頁面。 – mike

原因是top:0px; bottom:0px基本上強制元素高度爲其容器的100％，這也是視口的100％。

刪除bottom:0px讓content-wrapper按需擴展，與背景一起：

http://jsfiddle.net/VNtJw/15/

來源

2012-12-29 20:40:13

+1爲您的解決方案刪除底部;比我的更好的解決方案 –

刪除位置：絕對;

似乎修復它在你的jsfiddle例子。

來源

2012-12-29 20:40:06 Mark

我無法訪問您的網站，但如果我正確地讀你還可能會幫助你，但背景CSS主體組中的彩色元素，所以背景將會縮放並且無論如何都會出現。

body{ 
     background-color: #f6f6f6; 
    }

我希望這有助於！

來源

2012-12-29 23:49:34 Cole

背景顏色位置

回答

相關問題