Discussion :

[graphiste.caroline]

Bonjour

Je prépare un site avec un header, une section principale (<main>) et une section <aside>.
Je souhaiterai que ma section <aside> prenne la hauteur du contenu de la page (à savoir la hauteur du header+main).
Si cette hauteur est plus petite que le contenu de <aside>, alors une scrollbar apparaît.

Pour l'apparition de la scrollbar, pas de soucis.
Pour récupérer en Jquery la valeur totale de header+main, pas de soucis

J'ai un problème pour appliquer cette valeur à mon élément <aside>

Voici mon code (qui ne fonctionne pas du coup ) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<script>
$(document).ready(function(){
 
    var header = $('header').height();
    var main = $('main').height();
    var total = header + main + 'px';
    console.log(total);
 
    $('aside').css({"height": 'total'});
});
</script>

C'est surement le ".css" qui ne fonctionne pas, mais je n'arrive à savoir pourquoi.
Merci beaucoup par avance pour votre aide !

[graphiste.caroline]

Bon bah voilà, je savais que c’était tout bête !
La dernière ligne était fausse, il faut écrire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

	$('aside').css({"height": total});