web-dev-qa-db-fra.com

Définissez la hauteur de <div> = sur la hauteur d'une autre <div> via .css

J'en ai deux <div> éléments sur ce site . C'est un site que je suis en train de développer et c'est un travail en cours, mais certains des choix de conception que je voudrais finaliser ce soir. En ce moment, mon .css simplifié est donc:

#leftdiv {
    /*this is the navigation pane*/
    min-height: 600px;
    max-height: 600px;
}
#rightdiv {
    /*this is the primary pane*/
    min-height: 600px;
    max-height: 600px;
    overflow-y: auto;
}

J'ai défini une hauteur minimale et maximale pour les deux afin qu'ils conservent la même hauteur, et si le contenu déborde du #rightdiv, une barre de défilement apparaît. J'aimerais que cette barre de défilement disparaisse et que le #rightdiv et #leftdiv étirer pour s'adapter au contenu du #rightdiv. Vous pouvez voir dans la page que j'ai liée qu'il y a du contenu qui dépasse les limites du #rightdiv et la barre de défilement. Je souhaite que l'ensemble du site s'étire en hauteur pour s'adapter au contenu, mais si je supprime le overflow-y: auto; de mon .css et supprimer les hauteurs maximales, le #rightdiv s'étire, mais le #leftdiv non, ce qui donne un design vraiment moche.

J'aimerais quelque chose comme ci-dessous:

#leftdiv {
    min-height: equal to #rightdiv height if #rightdiv is taller, else 600px;
}
#rightdiv {
    min-height: equal to #leftdiv height if #leftdiv is taller, else 600px;
}

Comment pourrais-je régler la hauteur minimale des deux comme ceci?

javascriptjquerycss
18
gator

Je suppose que vous avez utilisé l'attribut de hauteur aux deux, donc je le compare avec une hauteur à gauche, faites-le avec javasript

var right=document.getElementById('rightdiv').style.height;
var left=document.getElementById('leftdiv').style.height;
if(left>right)
{
    document.getElementById('rightdiv').style.height=left;
}
else
{
    document.getElementById('leftdiv').style.height=right;
}

Une autre idée peut être trouvée ici HTML/CSS: Faire deux divs flottants de la même hauteur

notez que ce code n'est pas testé

Merci j'espère que cela vous aiderait ...... salutations ... :)

14
Just code

Si vous ne vous souciez pas des utilisateurs IE6 et IE7, utilisez simplement display: table-cell pour vos divs:

démo

Notez l'utilisation de wrapper avec display: table.

Pour les utilisateurs d'IE6/IE7 - si vous les avez - vous devrez probablement recourir à Javascript.

17
Michał Rybak

Si vous êtes prêt à utiliser javascript, vous pouvez obtenir la propriété sur un élément comme celui-ci: document.GetElementByID('rightdiv').style.getPropertyValue('max-height');

Et vous pouvez définir l'attribut sur un élément comme celui-ci: .setAttribute('style','max-height:'+heightVariable+';');

Remarque: si vous cherchez simplement à définir les deux éléments max-height propriété sur une seule ligne, vous pouvez le faire comme ceci:

#leftdiv,#rightdiv
{
    min-height: 600px;   
}
3
levininja

Vous bénéficierez certainement d'utiliser un cadre réactif pour votre projet. Cela vous éviterait une bonne quantité de maux de tête. Cependant, en voyant la structure de votre HTML, je ferais ce qui suit:

Veuillez vérifier l'exemple: http://jsfiddle.net/xLA4q/

HTML:

<div class="nav-content-wrapper">
 <div class="left-nav">asdasdasd ads asd ads asd ad asdasd ad ad a ad</div>
 <div class="content">asd as dad ads ads ads ad ads das ad sad</div>
</div>

CSS:

.nav-content-wrapper{position:relative; overflow:auto; display:block;height:300px;}
.left-nav{float:left;width:30%;height:inherit;}
.content{float:left;width:70%;height:inherit;}
1
Eduardo La Hoz Miranda

Il semble que ce que vous recherchez soit une variante de la CSS Holy Graal Layout , mais en deux colonnes. Consultez les ressources à cette réponse pour plus d'informations.

1
Christian Ternus