Вертикальная линейная проставка между двумя разделителями

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

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

Я пробовал вещи с границами и высотой: 100%, но я не мог заставить работать кросс-браузер. (IE и FF) Спасибо!

Ответы

Ответ 1

Предполагая, что ваш левый навигационный div имеет фиксированную высоту или высоту, которая не изменяется часто. Предположим, что ваш левый nav div имеет высоту 400 пикселей. Тогда:

div.leftnav {
   height: 400px;
   float: left;
}

div.rightContent {
   min-height: 400px;
   border-left: 1px solid gray;
   float:left;
}

Имейте в виду, что "минимальная высота" не поддерживается IE6.

Ответ 2

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

Ответ 3

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

Ответ 4

i однажды решил это, используя фоновое изображение, опустившееся на оси y. Просто создайте его так широко, как ваша страница, и не очень высокий, может быть, 10-20 пикселей. а затем просто повторите его вниз. Возможно, это может быть обман, но он работает в некоторых случаях: p

Один пример того, как я это сделал, вы можете увидеть на этом веб-сайте.

Ответ 5

То, как я это делаю, заключается в том, чтобы поместить элементы в контейнер div с скрытым переполнением. Затем вы применяете левую границу для всех повторяющихся div. Затем на всех плавающих дочерних элементах вы устанавливаете свойства css: padding-bottom: 2000px; краю дна-2000px;

Пример:

CSS

div.vert-line{overflow:hidden}
div.vert-line>div+div{border-left:#color;}
div.vert-line>div{width:200px; float:left; padding-bottom:2000px; margin-bottom:-2000px;}

HTML

<div class="vert-line>
  <div>Left Side</div>
  <div>Right Side</div>
</div>

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

Ответ 7

вы можете использовать css border-left в правом div.

.vertical_line { border-left: 1px solid #f2f2f2; }

<div>
  <p>first div</p>
</div>
<div class="vertical_line">
  <p>second div</p>
</div>