Нужна помощь с DIV-версткой сайта.

StackOverflow https://stackoverflow.com/questions/964959

  •  12-09-2019
  •  | 
  •  

Вопрос

Я пытаюсь создать страницу со следующим содержанием:

Уже есть следующее:

  • один div для страницы, чтобы центрировать всю страницу шириной 809 пикселей.
  • внутри <div class="page"> следующее:
    • <div class="header">
    • <div class="container"> (контейнер для контента)
    • <div class="footer">

С чем я борюсь:

  • <div class="container"> должно содержать следующее:
    • крайний левый <div class="leftShadow"> со 100% высотой до контейнера, с левым теневым изображением в качестве фона для <div class="leftShadow">
    • второй слева <div class="custom_content"> с высотой 100% до контейнера (будет содержать содержимое страницы
    • второй справа <div class="sidebar_right"> со 100% высотой до контейнера (будет содержать дополнительные ссылки)
    • самый правый <div class="rightShadow"> со 100% высотой до контейнера, с правым теневым изображением в качестве фона для <div class="rightShadow">

Итак, подведем итог:

<div class="page">
    <div class="header">header image</div>
    <div class="container">
        <div class="leftShadow"><img src="images/spacer.gif" alt="" /></div>
        <div class="custom_content">(this is where the content would be)</div>
        <div class="sidebar_right">(some other links)</div>
        <div class="rightShadow"><img src="images/spacer.gif" alt="" /></div>
</div>

Итак, что должно произойти, это когда либо custom_content или sidebar_right сила div по длине ниже другого, другой будет растягиваться по высоте, чтобы быть таким же, как и более длинный div.Очевидно, что оба боковых элемента div (leftShadow и rightShadow) также должны растягиваться до 100 % высоты контейнера.

Может ли кто-нибудь направить меня в правильном направлении?По сути, эти div должны вести себя так же, как таблица, когда содержимое одного td выходит за пределы высоты другого td.

Это было полезно?

Решение

Не используйте элементы div как таблицы!

Элементы div leftShadow и rightShadow совершенно не нужны.Объедините фоновые изображения в одно изображение и установите его в качестве фона вашего контейнера div.

Чтобы убедиться, что фоновое изображение заполняет высоту контейнера, установите фоновый повтор:повтор-у.

Другие советы

Почему бы не использовать что-то вроде «искусственных столбцов»?

Видеть http://www.alistapart.com/articles/fauxcolumns/

Возможно, вам не понадобятся элементы div leftShadow и rightShadow:Взгляни на искусственные колонны.

Это то, что вы ищете, я надеюсь.:)

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

Я не совсем уверен, как вы хотите, чтобы это выглядело, но я думаю, вам нужно какое-то теневое изображение в левой и правой части контейнера div.Как насчет удаления элементов div leftShadow и rightShadow, поместите повторяющееся фоновое изображение в div содержимого шириной 809 пикселей (и, возможно, высотой 1, в зависимости от того, как выглядит ваше теневое изображение).Также, возможно, установите overflow:hidden в div содержимого - если я правильно помню, это своего рода хак, который в этой ситуации растянет содержащий div.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top