Línea vertical espaciador entre dos divs

Entonces tengo dos divs. Una div izquierda con enlaces de navegación y una div derecha que se completa con el contenido según el enlace al que haga clic a la izquierda. Me gustaría tener una línea gris vertical entre la navegación y el contenido que separa los dos, pero necesito que cambie en altura dependiendo de cuánto tiempo el contenido del lado derecho es div. (Y también si el lado derecho no es tan largo como la navegación, haga que la línea vaya a la parte inferior de la navegación por defecto).

Entonces, si el usuario hace clic en un vínculo que hace que el contenido div sea realmente largo, necesito que la línea vertical cambie su altura de forma dinámica y baje hasta el final, pero si el contenido no es tan largo como el navegador aún lo necesito para recorrer todo el camino hasta el final de la navegación.

Estaba probando cosas con bordes y alto: 100% pero no pude hacer nada para trabajar en el navegador. (IE y FF) ¡Gracias!

Suponiendo que tu div nav izquierdo tiene una altura fija, o una altura que no cambia a menudo. Supongamos que tu div nav izquierdo tiene una altura de 400px. Entonces:

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

Tenga en cuenta que IE6 no admite “min-height”.

Una imagen de fondo repetitiva para el div principal con una línea vertical gris colocada de forma adecuada sería su mejor opción.

Puede dejar que el div de navegación tenga un borde a la derecha y el div de contenido tenga un borde a la izquierda. Permitir que esas dos fronteras se superpongan debería dar el efecto deseado.

Una vez resolví esto usando una imagen de fondo reparada en el eje y. Simplemente créelo tan ancho como su página y no muy alto, tal vez 10-20 píxeles. y luego solo repítalo hacia abajo. Puede ser una especie de trampa, pero funciona en algunos casos: p

Un ejemplo de cómo lo hice se puede ver en este sitio web .

La forma en que hago esto es poner los elementos en un div contenedor con desbordamiento oculto. Luego aplica un borde izquierdo a todos los divs que se repiten. Luego, en todos los elementos secundarios flotantes, estableces las propiedades de css: relleno-fondo: 2000px; margin-bottom-2000px;

Ejemplo:

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

 

La respuesta a esta pregunta puede ayudarte:

Extendiendo la barra lateral hacia abajo

puedes usar el css border-left en el div correcto.

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

first div

second div