una - lineas verticales en html

Separador de línea vertical entre dos divs

Question

Así que tengo dos divs. Un div a la izquierda con enlaces de navegación y un div a la derecha que se llena con el contenido según el enlace que haga clic a la izquierda. Me gustaría tener una línea gris vertical entre la navegación y el contenido que separa a los dos, pero necesito que cambie de altura dependiendo de cuánto tiempo dura la división de contenido del lado derecho. (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 enlace que hace que la división de contenido correcta sea realmente larga, necesito la línea vertical para cambiar su altura dinámicamente y bajar todo el camino, pero si el contenido no es tan largo como el navegador, todavía lo necesito para ir hasta el final de la navegación.

Estaba probando cosas con bordes y altura: 100%, pero no conseguí que nada funcionara en todos los navegadores. (IE y FF) ¡Gracias!

Answer 1

La forma en que lo hago es colocar los elementos en un contenedor div con el desbordamiento oculto. A continuación, aplica un borde izquierdo a todos los div que se repiten. Luego, en todos los elementos secundarios flotantes, establece las propiedades de css: padding-bottom: 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!

Answer 2

La respuesta a esta pregunta podría ayudarte:

Extendiendo la barra lateral hacia abajo

Answer 3

Podrías dejar que la división de navegación tenga un borde a la derecha y que la división de contenido tenga un borde a la izquierda. Dejar que esos dos bordes se superpongan debe dar el efecto deseado.

Answer 4

Puedes usar el css border-left en el div derecho.

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

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

Answer 5

Suponiendo que la división de navegación izquierda tiene una altura fija o una altura que no cambia con frecuencia. Supongamos que su navegador de navegación 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 "min-height" no es compatible con IE6.

Answer 6

Una imagen de fondo que se repita para el div padre con una línea gris vertical colocada apropiadamente sería su mejor apuesta.

Answer 7

Una vez resolví esto usando una imagen de fondo repada en el eje y. Solo créela tan ancha como su página y no muy alta, tal vez de 10 a 20 píxeles. y luego simplemente repetirlo hacia abajo. Tal vez una especie de trampa, pero funciona en algunos casos: p

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