Как установить высоту divs в "100%" альтернативу?

Question

Мне нужно создать div с текстурой бумаги и закругленными углами. Когда содержимое внутри растет, этот div должен расти вместе с ним и не разрушать BG ..

Итак, для этого я сделал основной div с содержимым, повторил центр bg и установил высоту на auto. Я сделал div для верхней и нижней его частей с текстурами и закругленными углами. Я использовал абсолютное позиционирование относительно содержимого div, поэтому при его увеличении нижняя граница всегда будет ниже содержимого div.

Все выглядит хорошо, НО, верхний и нижний делители покрывают содержимое div. Я могу исправить это, оставив большой пробел в верхней и нижней части содержимого, но это выглядит странно, имея такой большой пробел ... и это неправильно.

Есть идеи по этому поводу?

Answer 1

Вы можете сделать это с позиционированием:

div.paperTexture {
    position: absolute;
    top: 0px;
    bottom: 0px;
}

Также хорошо работает, если вам нужно, чтобы div занимал 100% области просмотра минус Xpx.Просто установите верх или низ Xpx.

Answer 2

Трудно сказать, не глядя на ваш код, но я думаю, что вашу проблему легко решить, добавив верхний и нижний отступы к вашему главному элементу div, размер верхней и нижней частей.

Редактировать: Альтернативой может быть размещение вашего контента в другом div в главном div и отказ от абсолютного позиционирования.Просто поместите все три элемента div один за другим и используйте отрицательные поля , чтобы натянуть содержимое поверх верхнего элемента div и сделать что-то похожее для нижней границы.

Answer 3

Использовать z-индекс: http://www.jsfiddle.net/xPEY6/

(Согласно CSS-спецификации вам на самом деле не нужен .text div, вы можете установить .top и .bottom на z-index: -1 и .container на z-index: 0, но Я бы не стал полагаться на то, что все браузеры правильно реализуют эту деталь.)

Answer 4

Попробуйте добавить поле сверху и снизу содержимого div (то есть. margin: 20px 0 30px 0;, где 20 - высота вашего верхнего div, а 30 - высота вашего нижнего div). Кроме того, вы не можете просто положить три элемента в контейнер и расположить их относительно друг друга, один на другой?

Пример:

<div id="container">
  <div id="top"></div>
  <div id="content"></div>
  <div id="bottom"></div>
</div>