línea vertical espaciador entre dos divs

Así que 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).línea vertical espaciador entre dos divs

Así que si el usuario hace clic en un enlace que hace que el contenido div sea realmente largo, necesito que la línea vertical cambie su altura dinámicamente y baje hasta el final, pero si el contenido no es tan largo como el nav todavía necesito que vaya hasta el final del navegador.

Estaba probando cosas con bordes y alto: 100% pero no pude hacer que funcionara todo el navegador. (IE y FF) ¡Gracias!

Fuente

2009-05-13 Anonymous

Suponiendo que su div nav izquierdo tiene una altura fija, o una altura que no cambia con frecuencia. Supongamos que tu div nav izquierdo tiene una altura de 400px. Luego:

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

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

Tenga en cuenta que "min-height" no es compatible con IE6.

Fuente

2009-05-13 21:17:40 Jin

Una imagen de fondo que se repite para el div principal con una línea gris vertical colocada adecuadamente sería su mejor opción.

Fuente

2009-05-13 21:17:50 da5id

De acuerdo. la solución de altura fija no funcionará si el contenido correcto es más largo. una imagen de fondo repetitiva para el padre sería mucho mejor. – Baer

La respuesta a esta pregunta podría ayudarle a:

Extending sidebar down page

Fuente

2009-05-13 21:18:03 Temple

Una vez resuelto este mediante el uso de una imagen de fondo repated 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. Tipo de trampa tal vez, pero funciona en algunos casos: p

Un ejemplo de cómo lo hice se puede ver en this website.

Fuente

2009-05-13 21:18:41 Svish

¡Parece que pensamos lo mismo (aproximadamente) al mismo tiempo! No creo que esto sea una trampa, y de alguna manera de qué se trata el desarrollador web (es decir,encontrar 'soluciones laterales) – da5id

sí, parece que :) – Svish

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

Fuente

2009-05-13 21:35:28 tobbez

Parece la solución más fácil, solo dale a uno de los divs un margen lateral negativo al ancho del borde – jeroen

¡Sí, muchas gracias, esta es la solución perfecta! – Steve

Acepto, esta es una solución más elegante que una imagen de fondo que se repite. – bellkev

La forma en que hago esto es colocar los elementos en un contenedor div 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

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

Espero que esto ayude!

Fuente

2011-09-18 06:33:08 rkingon

http://jsfiddle.net/epeleg/VKqEU/1/ muestra esto con detalles adicionales , pero ¿cómo se puede hacer para tener algo de espacio por encima y por debajo del sperator? – epeleg

puede usar el css border-left en la div derecha.

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

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

Fuente

2016-07-25 05:57:58 SamYah

línea vertical espaciador entre dos divs

Respuesta

Cuestiones relacionadas