Besoin de hauteur de barre latérale CSS pour étendre le contenu
https://stackoverflow.com/questions/1610710
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai une disposition en deux colonnes, avec une barre latérale grise à droite. J'ai besoin de la hauteur de la barre latérale pour se développer lorsque la hauteur de la colonne de gauche est augmentée (en raison de l'expansion dynamique du contenu). Je peux faire en sorte que la barre latérale corresponde à une page statique, mais je ne parviens pas à augmenter sa taille avec le reste de la page. J'ai fait des recherches sur Google, mais je n'ai pas trouvé de solution qui fonctionne pour moi.
Quelqu'un sait-il comment faire cela?
La solution
Il s'agit d'un problème courant lors de l'utilisation de DIVS pour ce type de présentation.
Si vous recherchez une "fausse colonne" sur Google, vous devriez obtenir des réponses.
par exemple. http://www.alistapart.com/articles/fauxcolumns/
Autres conseils
Cela peut sembler légèrement inacceptable, mais si vous utilisez jQuery sur votre site, vous pouvez effectuer un calcul rapide et redimensionner tous les DIV partageant une classe similaire à la hauteur maximale:
$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));
Ce problème me hante depuis un moment et j'ai écrit un article sur ce problème: Fait avec de fausses colonnes . Voici ce que j'ai soutenu:
Solution basée sur JavaScript pour cela le problème n'est pas pire qu'un autre Solution. En fait, si vous utilisez JavaScript, vous pouvez économiser quelques heures de frustration d'essayer d'obtenir des choses travail. Les gens vous mettront en garde contre cela en disant & # 8220; Que se passera-t-il si l'utilisateur a désactivé JavaScript? & # 8220 ;. Croyez-moi, si l'utilisateur a désactivé JavaScript, la plupart du Web est cassé pour lui quand même. Votre sidebar ne question pour lui.
Comme cballou l’a mentionné, la méthode la plus simple consiste à utiliser le code JQuery:
$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));
J'ai modifié la
Dans ma feuille de style,
.sidec
{
background-color:#123456;
}
Dans ma page HTML,
<body class="sidec">
content....
</body>
J'ai récemment vu une solution assez créative à ce problème en utilisant les propriétés CSS position: absolute et bordure .
Cela vaut vraiment la peine de vérifier si cela fonctionne pour vous.
Lien: http: //woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/
Je ne suis pas sûr que cela aidera, car je suis un débutant. Cependant, lorsque j'ai eu du mal à faire en sorte que mon encadré affiche tout le contenu lorsque j'ai doublé sa taille, j'ai procédé comme suit. Je changeais de hauteur et de largeur sans répondre jusqu'à ce que je change de classe. Ma classe était listée SB frame SB width. Ainsi, lorsque j'ai changé de classe pour lire SB height, SB width correspond à mon contenu au lieu de la taille d'origine. J'ai également essayé SB max width avec travail aussi, mais cela a supprimé la barre de menu de mon pied de page (ce qui signifie qu'il ne l'afficherait plus). Je suis retourné à la hauteur SB largeur SB, et tout va bien. C’est un super élémentaire pour tous, j'en suis sûr, mais juste au cas où un autre débutant lisant ceci ne comprend pas beaucoup le code html comme moi ... J'espère que cela aide =) Joyeuses fêtes à tous! câlins, tara
Je suppose que vous souhaitez appliquer certains effets à votre mise en page, de sorte que les deux colonnes doivent être redimensionnées ensemble. Si vous souhaitez modifier dynamiquement les valeurs de hauteur des colonnes, je doute que cela fonctionne simplement avec css, à moins que vous n'implémentiez du javascript pour contrôler le style.
Comme l'a suggéré Dal, regardez le lien sur les fausses colonnes. Comme son nom l'indique, la solution ne consiste pas beaucoup à modifier la hauteur des colonnes. Au lieu de cela, il donne la "illusion" que les deux colonnes semblent être de la même hauteur alors qu'en réalité, elles ne le sont pas - et le sont avec l’utilisation de tuiles d’image de fond.
L’idée est qu’il n’est pas nécessaire de compliquer la marge bénéficiaire. Structure simple avec une touche "d'illusion" avec des images est une pratique courante dans la conception Web.
Cordialement, Jonas
Avec la mauvaise attitude envers les nouveaux membres ici, je m'attends à être bloqué pour cette réponse, voilà. J'ai contourné ce problème en créant une image d'arrière-plan large de 960 pixels de haut, avec les deux couleurs dont j'avais besoin pour les colonnes dans leurs largeurs respectives (780 pixels et 180 pixels). Je l’ai ensuite utilisée comme image d’arrière-plan de mon conteneur répétée sur l’axe des y et j'ai rendu le contenu et la couleur de fond de la barre latérale droite: transparent.
.container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto;
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}
.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}
Je suis sûr que cette méthode a ses limites, mais elle fonctionne parfaitement sur toutes mes pages.
Il est possible que je ne l’aie pas très bien expliqué. Si c'est le cas, soyez gentil avec vous, cela vous plaira. Je vais essayer d’étoffer ma méthode (qui est probablement déjà bien connue).
