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

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

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

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

  2. crease_center.png, который представляет собой повторяющуюся среднюю часть тени, которая может расти вместе с содержимым страницы.

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

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

    }

Что вы предлагаете в качестве некоторых подходов к решению такого рода проблемы?


css background-image
person Homan    schedule 13.03.2012    source источник
comment
Не могли бы вы показать HTML/CSS, как эти div настраиваются и стилизуются?   -  person zgood    schedule 13.03.2012
comment
Да, я обновил свой вопрос, чтобы включить то, что у меня есть до сих пор.   -  person Homan    schedule 13.03.2012
comment
Итак, ваша проблема в том, что верхнее/нижнее изображения будут перекрывать среднее изображение, если контейнер заполнен на 100%?   -  person Kory Sharp    schedule 13.03.2012
comment
да, перекрывающиеся изображения не будут работать, потому что они частично прозрачны. они изображения имитируют тени. я ищу решение только css, без js или таблиц... если возможно.   -  person Homan    schedule 14.03.2012

Ответы (2)


arrow_upward
0
arrow_downward

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

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

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

person Kory Sharp    schedule 13.03.2012

arrow_upward
0
arrow_downward

Возможно, в этом случае поможет <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;

    }
person zgood    schedule 13.03.2012
comment
Я обновил его, добавив высоту: 100% в центральный элемент div. Также вы можете добавить vertical-align:top; в вашу центральную ячейку таблицы. - person zgood; 14.03.2012