web-dev-qa-db-fra.com

Entretoise verticale entre deux divs

Donc j'ai deux divs. Un div de gauche avec des liens de navigation et un div de droite qui contient du contenu en fonction du lien sur lequel vous cliquez à gauche. J'aimerais une ligne grise verticale entre la navigation et le contenu séparant les deux, mais j'ai besoin que la hauteur change en fonction de la longueur de la div de contenu de droite. (Et aussi si le côté droit n’est pas aussi long que la navigation, laissez la ligne aller au bas de la navigation par défaut).

Donc, si l'utilisateur clique sur un lien qui rend le contenu du contenu correct très long, j'ai besoin de la ligne verticale pour changer sa hauteur de manière dynamique et descendre tout en bas, mais si le contenu n'est pas aussi long que le navigateur, j'en ai toujours besoin aller jusqu'au bout du nav.

J'essayais des choses avec les bordures et la hauteur: 100% mais je ne pouvais rien faire fonctionner avec plusieurs navigateurs. (IE et FF) Merci!

htmlcsslayout
19
Mike

En supposant que votre div de navigation gauche ait une hauteur fixe ou une hauteur qui ne change pas souvent. Supposons que votre div de navigation gauche ait une hauteur de 400px. Ensuite:

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

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

N'oubliez pas que "min-height" n'est pas pris en charge par IE6.

18
Jin

Une image d'arrière-plan répétée pour la div parente avec une ligne grise verticale correctement positionnée serait votre meilleur choix.

8
da5id

Vous pouvez laisser à la navigation div une bordure à droite et à la div content une bordure à gauche. Laisser ces deux frontières se chevaucher devrait donner l’effet souhaité.

8
tobbez

Pour ce faire, je place les éléments dans un conteneur div avec un débordement masqué. Vous appliquez ensuite une bordure gauche à toutes les div répétées. Ensuite, sur tous les éléments enfants flottants, définissez les propriétés css: padding-bottom: 2000px; margin-bottom-2000px;

Exemple:

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>

J'espère que cela t'aides!

1
rkingon

j'ai une fois résolu cela en utilisant une image d'arrière-plan représentée sur l'axe des ordonnées. Il suffit de le créer aussi large que votre page et pas très grand, peut-être 10-20 pixels. et puis il suffit de le répéter vers le bas. Un peu tricheur peut-être, mais ça marche dans certains cas: p

Un exemple de la façon dont je l’ai fait est visible sur ce site Web .

1
Svish

La réponse à cette question pourrait vous aider:

Extension de la barre latérale en bas de la page

0
Temple

vous pouvez utiliser le css border-left sur la droite div.

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

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