Question

我设置的背景颜色不适用于整个内容区域（内容包装器）。它仅适用于大约一半的页面。 JsFiddle

（内容的位置居中于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

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

Answer 1

原因是top:0px; bottom:0px基本上强制元素高度为其容器的100％，结果也是视口的100％。

正在删除bottom:0px允许content-wrapper根据需要及其背景展开：

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

Answer 2

删除职位：绝对;

似乎要在你的jsfiddle示例中修复它。

Answer 3

我无法访问您的网站，但如果我正确地阅读了您，那么除了CSS主体组中的背景颜色元素之外，它也可能会有所帮助，因此背景将会缩放并且无论如何都存在。

body{
      background-color: #f6f6f6;
    }

我希望这有帮助！

背景颜色位置

3 个答案: