Боковая рамка и динамический контент помогают - PullRequest
Новая
       16

Боковая рамка и динамический контент помогают

0 голосов
/ 25 октября 2009

У меня есть две боковые границы на моем веб-сайте, левая и правая стороны ... маленькое изображение размером 15x15, которое повторяется на веб-сайте ... При настройке 100%, как показано ниже, граница отображается только на один экран это 100%). Но мой веб-сайт динамичен, и содержимое меняется ... Я хочу, чтобы границы менялись вместе с общей высотой страницы ... Как я могу это сделать?

Вот CSS: 

.bgr_right {
background-image: url(../Graphics/bgr_right.jpg);
background-repeat: repeat-y;
background-position: right;
position: absolute;
top: 0px;
height: 100%;
width: 30px;
right: 0px;
background-color: #E7F5F0;
    }

Вот HTML DIV: 

    <div class="bgr_right"></div>

Кроме того, позиция: абсолютно правильная вещь?

UPDATE : Прочитав ответы, я подумал, что должен быть лучший способ ... Как насчет использования javascipt ... Кто-нибудь знает, есть ли способ, с помощью javascript, получить высоту тела? то: 

     <div height="javascript_function()" or something...

???

Еще раз спасибо

Ответы [ 4 ]

1 голос
/ 26 октября 2009

В качестве альтернативы я бы предложил обернуть еще два делителя вокруг контейнера содержимого и повторить фон, выравнивая его по одному делению слева и по другому справа. I.e.:

<div id="left_wrapper" style="background: url(my_leftimage.png) y-repeat top left;">
<div id="right_wrapper" style="background: url(my_rightimage.png) y-repeat top right;">

  <div id="content">hello world</div>

</div>
</div>

Затем, если вы хотите, чтобы высота составляла 100%, установите html, body и контейнеры содержимого на 100% высоты, как это показано в CSS:

html, body, #content {height: 100%; }

Надеюсь, это поможет:)

0 голосов
/ 25 октября 2009

Если у вас дизайн с фиксированной шириной, вы можете просто использовать одно фоновое изображение, либо на теле, либо на контейнере контента, в зависимости от желаемого эффекта. Это изображение будет что-то вроде: 

(left bar)-> | ([x]px space here) | <-(right bar)

С repeat-y это даст вам: 

|                |
|                |
|                |
|  content here  |
|                |
|                |
|                |

Тогда столбики будут такими же высокими, как ваш контент. Если вы примените это к <body>, то оно будет иметь высоту тела.

Надеюсь, это поможет.

0 голосов
/ 25 октября 2009

Кажется, что нет причины использовать отдельный div для фона, так как он пустой, но это зависит от фиксированной ширины столбца.

Вы должны применить фоновое изображение к div, для которого вы хотите иметь фон, таким образом, вы можете быть уверены, что оно продолжится ниже по мере роста div.

  1. Если ваша ширина столбца фиксирована, вы можно просто совместить левую и правую изображение в очень широком изображении, которое будет повторять только по вертикали.

  2. Если ширина вашего столбца является переменной, Вы можете иметь, например, слева фон в растущем Div и правильный на div обертки, что содержит растущее деление.

Используя правильный отступ, вы получите желаемый эффект.

0 голосов
/ 25 октября 2009

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

<table>
  <tr>
    <td class="bgr_left"></td>
    <td class="content"></td>
    <td class="bgr_right"></td>
  </tr>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...