Przekładka w linii pionowej między dwoma elementami div

Question

Tak więc mam dwa elementy div. Jeden lewy div z linkami nawigacyjnymi i jeden prawy div, który wypełnia treść w zależności od tego, który link kliknąłeś po lewej stronie. Chciałbym mieć pionową szarą linię między nawigacją a treścią oddzielającą dwa, ale potrzebuję jej do zmiany wysokości w zależności od tego, jak długo ma zawartość div z prawej strony. (A także, jeśli prawa strona nie jest tak długa, jak nawigacja, domyślnie linia znajduje się na dole nav).

Jeśli użytkownik kliknie na link, który sprawia, że ​​właściwa zawartość div jest naprawdę długa, potrzebuję linii pionowej, aby dynamicznie zmieniać jej wysokość i iść do samego końca, ale jeśli zawartość nie jest tak długa, jak nawigacja nadal potrzebuję go do końca nawigacji.

Próbowałem rzeczy z granicami i wysokością: 100%, ale nie mogłem dostać nic do pracy w różnych przeglądarkach. (IE i FF) Dzięki!

Answer 1

Zakładając, że lewy działka nawigacyjna ma stałą wysokość lub wysokość, która nie zmienia się często. Załóżmy, że twój lewy div div ma wysokość 400 pikseli. Następnie:

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

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

Należy pamiętać, że "min-height" nie jest obsługiwane przez IE6.

Answer 2

Powtarzalny obraz tła dla elementu nadrzędnego z pionową, szarą linią umieszczoną odpowiednio, byłby najlepszym wyborem.

Answer 3

Odpowiedź na to pytanie może pomóc:

Extending sidebar down page

Answer 4

kiedyś rozwiązać to za pomocą obrazu tła powtarzającym się na osi y. Po prostu utwórz ją tak szeroką jak twoja strona i niezbyt wysoką, może 10-20 pikseli. a następnie po prostu powtórz to w dół. Może trochę oszustwo, ale działa w niektórych przypadkach: p

Jeden przykład tego, jak to zrobiłem, można zobaczyć na stronie this website.

Answer 5

Można pozwolić, aby element nawigacyjny miał obramowanie po prawej stronie, a element div treści po lewej stronie. Pozwalanie, by te dwie granice pokrywały się, powinno dać pożądany efekt.

Answer 6

Sposób, w jaki to robię, to umieszczenie elementów w pojemniku z ukrytym przepełnieniem. Następnie dodajesz lewą ramkę do wszystkich powtarzających się div. Następnie we wszystkich pływających elementach podrzędnych ustawiamy właściwości css: padding-bottom: 2000px; margin-bottom-2000px;

Przykład:

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> 

Nadzieja to pomaga!

Answer 7

możesz użyć css border-left na prawym div.

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

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