Вертикальная прямая между двумя делителями - PullRequest
Новая
       8

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

19 голосов
/ 14 мая 2009

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

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

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

Ответы [ 7 ]

18 голосов
/ 14 мая 2009

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

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

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

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

8 голосов
/ 14 мая 2009

Вы можете позволить разделу навигации иметь рамку справа, а раздел содержимого - рамку слева. Разрешение перекрытия этих двух границ должно дать желаемый эффект.

8 голосов
/ 14 мая 2009

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

1 голос
/ 18 сентября 2011

Я делаю это, помещая элементы в контейнер 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>

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

1 голос
/ 14 мая 2009

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

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

0 голосов
/ 25 июля 2016

вы можете использовать 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>
0 голосов
/ 14 мая 2009

Ответ на этот вопрос может помочь вам:

Расширение боковой панели вниз страницы

...