Как создать гибкую область содержимого с повторяющимся фоновым изображением с фиксированными переходами / заглушками изображений сверху и снизу?

Question

У меня есть веб-страница, которую я хочу оформить, чтобы она выглядела как открытая книга с складкой / тенью по центру. Высота страницы не фиксированная, но гибкая и увеличивается с содержанием. Элемент body имеет фоновое изображение текстуры бумаги без каких-либо теней.

Для тени мой дизайнер дал мне 3 полупрозрачных png:

1. crease_top.png, который содержит переход верхней части книги.

2. crease_center.png - повторяемая средняя часть тени, которая может расти вместе с содержимым страницы.

3. crease_bottom.png, который содержит нижнюю часть тени.

Итак, вот моя проблема: я не могу использовать верхнюю и нижнюю точки с абсолютной позицией поверх тени высотой 100%, потому что прозрачные изображения не могут правильно покрывать. Я мог бы расположить все 3 деления друг над другом в нормальном потоке, но я не знаю, как установить высоту среднего деления. Мне нужно что-то вроде высоты: 100% минус высота верхнего и нижнего pngs, чтобы получить повторяющуюся область. Я не могу использовать заполнение, потому что заполнение сдвигает центр 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

Поскольку ваши верхние / нижние изображения имеют фиксированную высоту, я бы предложил использовать javascript для регулировки высоты средней области содержимого при изменении размера страницы.Например, если бы вы использовали prototypejs, вы могли бы что-то вроде ...

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

Где 272 представляет общую высоту верхнего / нижнего элементов.

Answer 2

Может быть, <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;

    }