CODEWITHSUNDEEP
cssbackground
mike
mike

Reputation: 1175

background color position

The background color I've set isn't being applied to the whole content area (content-wrapper). It's only being applied to about half the page. JsFiddle

(The position of the content is centered outside of 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>

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

Upvotes: 2

Views: 283

Answers (3)

Cole
Cole

Reputation: 21

I can't access your site but if I'm reading you correctly it may also help if you but the background-color element within a CSS body group so the background will scale and be present regardless.

body{
      background-color: #f6f6f6;
    }

I hope this helps!

Upvotes: 1

John Dvorak
John Dvorak

Reputation: 27307

The reason is that top:0px; bottom:0px basically forces the element height to be 100% of its container, which turns out to be 100% of the viewport as well.

Removing bottom:0px lets content-wrapper expand as needed, together with its background:

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

Upvotes: 2

Mark
Mark

Reputation: 2473

Remove position:absolute;

Seems to fix it on your jsfiddle example.

Upvotes: 1

Related Questions