bg가있는 div 컨테이너를 스크롤 막대없이 세로로 확장하려고 시도했습니다.

원하는 것은 세로로 긴 그라디언트가있는 bg가있는 가운데 맞춤 콘텐츠 열을 사용하는 것입니다. 브라우저를 지나칠 가능성이 높지만 스크롤바를 만들지는 않을 것입니다. 나는 마치 그것이 계속되는 신체 배경과 같고 브라우저가 더 크거나 더 많은 콘텐츠가있는 경우에만 드러내고 싶다.bg가있는 div 컨테이너를 스크롤 막대없이 세로로 확장하려고 시도했습니다.

출처

2011-01-23 Adam

'background-image' *는 콘텐츠의 높이/너비가 보증하는 경우에만 공개됩니다. –

이렇게 보이는 것 같습니다. 내 예제에서는 테이블을 사용했지만 div 레이아웃으로 바꾸려고 시도 할 수 있습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta content="text/html; charset=UTF-8" http-equiv="content-type"> 
     <title>aruseni</title> 
     <style type="text/css"> 
body { 
    font-size: 14px; 
    font-family: arial, helvetica, sans-serif; 
    color: #000; 
    background-color: #9b9b9b; 
} 

html, body{ 
    margin:0; 
    padding:0; 
    height:100%; 
    border:none 
} 

a, a:link { 
    font-weight: bold; 
    color: #000; 
} 

a:visited { 
    font-weight: bold; 
    color: #444; 
} 

img { 
    border: 0; 
} 

table.site { 
    border: 0; 
    padding: 0; 
    border-spacing: 0; 
    margin: 0 auto; 
    width: 80%; 
    height: 100%; 
    min-width: 700px; 
} 

tr { 
    vertical-align: top; 
} 

td { 
    padding: 0; 
} 

td.left_side { 
    width: 200px; 
} 

td.right_side { 
    width: 200px; 
} 

td.content { 
    padding: 10px; 
    background-color: #fff; 
    background-image:url('gradient-1x2000.png'); 
    background-repeat: repeat-x; 
    width: 200px; 
} 
     </style> 
    </head> 
    <body> 

     <table class="site"> 
      <tr style="padding: 0px;"> 
       <td class="left_side">&nbsp;</td> 
       <td class="content"> 
        <p>Your contents go here. :)</p> 
       </td> 
       <td class="right_side">&nbsp;</td> 
      </tr> 
     </table> 
    </body> 
</html>

그라디언트는 높이가 2000이고 무게가 1 인 이미지입니다. 그래디언트가 맨 위에서 시작하고 브라우저의 높이가 2000 픽셀 이상 (실제로?)이면 "background-color : #fff;"가 지정되므로 흰색이 렌더링됩니다.

출처

2011-01-23 22:14:11 aruseni

bg가있는 div 컨테이너를 스크롤 막대없이 세로로 확장하려고 시도했습니다.

답변

관련 문제