배경색 위치

설정 한 배경색이 전체 콘텐츠 영역 (콘텐츠 래퍼)에 적용되지 않습니다. 페이지의 절반 정도에만 적용됩니다.배경색 위치

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

출처

2012-12-29 mike

배경 : # f6f6f6; 어디에 적용하든 전체 페이지를 다루지는 않습니다. – mike

이유는 기본적으로 top:0px; bottom:0px이 요소 높이를 해당 컨테이너의 100 %로 강제하기 때문에 뷰포트의 100 %가되는 것입니다.

함께 그 배경으로, 필요에 따라 확장 bottom:0pxcontent-wrapper을 할 수 있습니다 제거 :

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

출처

2012-12-29 20:40:13

하단을 제거 할 수있는 솔루션에 +1; 내 것보다 훨씬 나은 해결책 –

제거 위치 (콘텐츠의 위치는 외부 JsFiddle 중심) : 절대;

jsfiddle 예에서 문제가 해결 된 것 같습니다.

출처

2012-12-29 20:40:06 Mark

나는 당신의 사이트에 액세스 할 수 있지만 내가 제대로 읽고 있어요 경우 또한하지만 배경 경우 도움이 될 수 있습니다 CSS 본문 그룹 내에서 -color 요소를 사용하면 배경이 확장되고 관계없이 표시됩니다.

body{ 
     background-color: #f6f6f6; 
    }

이 정보가 도움이되기를 바랍니다.

출처

2012-12-29 23:49:34 Cole

배경색 위치

답변

관련 문제