Comment puis-je étendre ma barre latérale sur toute la longueur de la page?
J'ai regardé d'autres solutions, cependant ils ne sont pas de travail pour moi. J'ai essayé hauteur: 100% de ma barre latérale et qui n'a pas encore fait le tour. Quelqu'un pourrait-il svp me pointer dans la bonne direction? J'aimerais que la couleur de la barre latérale pour s'étendre sur toute la longueur de la page.
HTML: http://lrroberts0122.github.com/DWS/lab3/index.html
CSS: http://lrroberts0122.github.com/DWS/lab3/css/main.css
source d'informationauteur Lindsay
Vous devez vous connecter pour publier un commentaire.
Ok je vais essayer d'expliquer peu plus ici:
Lorsque vous définissez height:100%; en css, vous devez vous demander - "100% de quoi?" - ... Eh bien cela dépend de comment vous définissez l'élément de position. Lorsque vous définissez position:absolute; serai 100% de navigateur de l'utilisateur vue autrement, il s' 100% de l'élément parent de la hauteur. Ainsi, si vous n'avez pas de fixer une hauteur ou une position absolue, quelque part, il vous suffit de faire 100% de rien du tout qui n'est rien (ce qui annule de contenu par défaut-taille ajustée).
Donc supposons pour un moment d'envisager de faire div parent de la position absolue et en le plaçant à 100% de la hauteur (de sorte que votre position relative des enfants encadré obtenir la même hauteur si sa hauteur est fixée à 100%). ICI UN VIOLON - Maintenant, nous allons voir ce que nous avons: nous avons un div parent(jaune) haute que le navigateur de l'utilisateur vue, mais sa hauteur est fixe et ne change pas à ajuster le contenu, puis nous avons une barre latérale(rouge) correspondant à l'un de ses parents hauteur (donc sa hauteur ne tient pas le contenu feather), nous avons enfin un long texte du contenu(transparent bg) chevauche la div parent de hauteur, et les terres, au milieu de nulle part. Pas bon...
Que pouvons-nous faire? (ne semble pas réglage du parent le débordement de défilement est une bonne idée) ... nous avons besoin de regarder le problème dans le bon sens : en gros, vous avez deux frère divs et que vous souhaitez afin de les adapter leur contenu à la hauteur de bien, mais en même temps vous voulez que l'un d'entre eux de garder son petit frère est à la même hauteur -> pas facile comme bonjour css solutions pour que (que je connais).
Enfin, ma suggestion est d'utiliser un peu de jquery: ici, une installation rapide et ici le site complet. Maintenant, il suffit d'écrire:
et cela fonctionnera parfaitement. Notez que j'ai quitté la position absolue pour le parent et l'ensemble à 100% de la hauteur, mais ne l'a pas fait toute la hauteur de la barre de menu qui maintenant assez correspond à la taille réelle du panneau de contenu.
Espère que cette aide
@Onheiron, votre post a été extrêmement utile. Merci!!!!
J'ai ajouté une ligne de mon code car j'ai remarqué que court le contenu des pages ne s'étend pas tout le chemin vers le bas de la page et causé la barre latérale de rester court. Maintenant, le script vérifie ce que l'on (.contenu ou de l'organisme) a une plus grande hauteur, et applique ensuite la même hauteur que la
.sidebar
.HTML:
JavaScript:
CSS:
Puis perdre la partie de l'instruction si comme il sera par défaut à la css. Pas besoin de script, si l'
.content
est une zone de moindre hauteur que le corps.height:100%
devrait fonctionner, mais vous avez à faire assurez-vous de faire la div contenant 100%.