상단과 하단 고정 이미지 전환/대문자로 백그라운드 이미지가 반복되는 유연한 콘텐츠 영역을 만드는 방법은 무엇입니까?

Question

중간에 아래로 접은 자국/그림자가있는 열린 책처럼 보이도록 스타일을 지정하려는 웹 페이지가 있습니다. 페이지의 높이는 고정되어 있지 않고 유연하며 콘텐츠와 함께 커집니다. 본문 요소에는 그림자가없는 용지 텍스처의 배경 이미지가 있습니다. 책의 맨의 전환을 포함

1. crease_top.png : 내 디자이너가 나에게 3 반투명 PNG 파일을 주신 그림자

   .

2. crease_center.png 그림자의 중간 부분으로 반복되는 페이지 내용으로 커질 수 있습니다.

3. crease_bottom.png 여기에는 그림자의 하단 섹션이 있습니다.

내 문제는 다음과 같습니다. 투명 이미지가 제대로 덮히지 않기 때문에 100 % 높이 그림자 상단에 절대 위 치를 지정할 수 없습니다. 정상적인 흐름에서 3 div를 서로 위에 놓을 수는 있지만 중간 div의 높이를 설정하는 방법을 모르겠습니다. 높이와 같은 것이 필요합니다 : 반복되는 영역을 얻으려면 상단 및 하단 png 높이를 100 % 빼기. 패딩은 가운데 div 키를 누르고 배경 이미지를 제한하지 않기 때문에 패딩을 사용할 수 없습니다. 여기

는 내가 지금까지 가지고있는,하지만 난 필요가 더 나은 구현 될 경우 변경 기꺼이 :

<div id="sketchbook_post"> 

    <div id="crease_wrap"> 
     <div id="crease_top"> 
     </div> 
     <div id="crease_center"> 
     </div> 
     <div id="crease_bottom"> 
     </div> 
    </div> 

</div> 


#crease_wrap { 
     position:absolute; 
     top:0; 
     left:50px; 
     height:100%; 
     width:50px; 
    } 
#crease_top { 
     height:105px; 
     width:53px; 
     background-image: url(<%= asset_path 'page-crease_top.png' %>); 
     background-repeat: no-repeat; 

    } 
#crease_center { 
     width:53px; 
     padding-top:105px; 
     padding-bottom:176px; 
     background-image: url(<%= asset_path 'page-crease_center.png' %>); 
     background-repeat: repeat-y; 

    } 

#crease_bottom { 
     height:167px; 
     width:53px; 
     background-image: url(<%= asset_path 'page-crease_bottom.png' %>); 
     background-repeat: no-repeat; 

    } 

당신은 몇 가지 방법이 이런 종류의 문제를 해결하기로 무엇을 제안합니까?

Answer 1

어쩌면 <table> ...이 경우에 도움이 될 것

<div id="sketchbook_post"> 
    <table id="crease_wrap" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td id="crease_top"> 
       <div>&nbsp;</div> 
      </td> 
     </tr> 
     <tr> 
      <td id="crease_center"> 
       <div style="height:100%;">&nbsp;</div> 
      </td> 
     </tr> 
      <tr> 
      <td id="crease_bottom"> 
       <div>&nbsp;</div> 
      </td> 
     </tr> 
    </table> 
</div> 

    #crease_wrap { 
     position:absolute; 
     top:0; 
     left:50px; 
     height:100%; 
     width:50px; 
    } 
#crease_top { 
     height:105px; 
     width:53px; 
     background-image: url(<%= asset_path 'page-crease_top.png' %>); 
     background-repeat: no-repeat; 

    } 
#crease_center { 
     width:53px; 
     height:100%; 
     background-image: url(<%= asset_path 'page-crease_center.png' %>); 
     background-repeat: repeat-y; 

    } 

#crease_bottom { 
     height:167px; 
     width:53px; 
     background-image: url(<%= asset_path 'page-crease_bottom.png' %>); 
     background-repeat: no-repeat; 

    } 

Answer 2

당신의 위/아래 이미지 높이를 고정되어 있기 때문에, 나는 같은 중간 컨텐츠 영역의 높이를 조정하기 위해 자바 스크립트를 사용하여 제안 페이지 크기가 변경됩니다. 당신은 예를 들어 prototypejs를 사용한 경우, 당신은 ... 같은 너무 수 (272)는 위/아래 요소의 결합 높이를 나타냅니다

window.onresize = function() { 
    $('crease_center').setStyle({ height: (document.viewport.getHeight() - 272) + 'px' }); 
} 

.