2 colonnes de même hauteur - de Twitter Bootstrap 2.0

Bien, tout le monde sait que de Twitter Bootstrap est un outil formidable et fait beaucoup de choses plus facile pour ceux qui, comme moi, ne savent pas beaucoup sur le CSS encore. Mais, parfois, il peut être aussi un problème.

La chose est la suivante: je suis sur un fixe 940px de large, 12-grille de colonne centrée mise en page à deux colonnes, et je voulais que les deux colonnes ayant la même hauteur. Le code de droit est maintenant comme ceci:

<div class="container">
    <div class="content">
        <div class="row">
            <div class="span8 div-content">
                <div class="center95">
                    <div id="notWrap">
                        <div id="not">
                        </div>
                    </div>
                </div>
            </div>
            <div class="span4 div-sidebar">
                <div class="center90">
                    <div id="myPWrap">
                        <div id="myP">
                        </div>
                    </div>
                    <hr />
                    <div id="otherPWrap">
                        <div id="otherP">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer id="bottom" class="footer">
        <p>&copy;</p> 
    </footer> 
</div>

Comme vous pouvez le voir, il y a des divs avec aucun contenu, comme "myP", "otherP" et "pas". Ils sont remplis à l'aide de Javascript, et la quantité de contenu stockées dans peut varier et, de ce fait, dans nombre de fois qu'une colonne (Les "colonnes" ici sont représentés par la div avec la "div " contenu" de la classe et par la div avec la "div-barre latérale" de la classe) sera plus grand que l'autre (Dans mon cas particulier, les deux colonnes peuvent être "le plus grand").

Voici une photo, si elle contribue à:

Fondamentalement, la colonne de gauche (La <div class="span8 div-content"> dans le code) doit être de la même taille de la colonne de droite (La <div class="span4 div-sidebar"> dans le code), et vice-versa. Aussi, si cela peut aider, le jaune est la partie la <div class="content"> et le fond blanc est le <div class="container">. Le <div class="row"> est juste un container de deux colonnes et n'a pas de couleur.

Je sais que les "colonnes de même hauteur" problème est un problème récurrent pour les programmeurs web, mais les solutions que j'ai essayé jusqu'à présent n'a pas travaillé. Je ne voudrais vraiment pas le "Faux Colonne de solution", car, comme je suis un newbie dans le CSS, je n'ai pas envie de faire appel à une solution comme celle-ci. Si possible, je préfère rester à la pure CSS.

À l'avance, merci pour ceux qui vont être prêts à aider.

Avez-vous regarder dans un position: absolute; et top: 0;bottom: 0; ? Si oui, peut-être faux à l'arrière-plan avec une bordure ou d'un wrapper, et que l'arrière-plan blanc. Il suffit de apparaissent à la même hauteur.

OriginalL'auteur Falassion | 2012-02-08

css twitter-bootstrap

6

Celui qui a toujours travaillé pour moi, c'est:
```
#myPWrap,#otherPWrap {
  overflow:hidden;
}

#myP,#otherP {
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}
```
Vous pouvez également essayer de mettre l'envelopper dans une table et le #ppcs dans une table col.
```
#myPWrap,#otherPWrap {
 display: table;
}

#myP,#otherP {
 display: table-cell;
}
```
Oh, je pense que je n'ai pas été clair: les divs qui doit avoir la même taille, à l'extérieur, l'un avec le "div " contenu" de la classe et celle avec le "div-barre latérale" de la classe. Solution similaire, ou il change tout?
Les solutions doivent s'appliquer
cela ne semble pas fonctionner pour les dispositions fluides
lequel? le deuxième ou le premier extrait?

OriginalL'auteur Filype

J'ai résolu ce problème avec une coutume jQuery max plugin:

$.fn.max = function(selector) { 
    return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get() ); 
}

Ici contenu de la boîte est à l'intérieur de ma colonne de l'élément, le contenu d'un container est l'enveloppe qui contient les colonnes:

$('.content-box').height(function () {
  var maxHeight = $(this).closest('.content-container').find('.content-box')
                  .max( function () {
                    return $(this).height();
                  });
  return maxHeight;
})

Espère que cette aide.

OriginalL'auteur György Balássy

Vous devez vous connecter pour publier un commentaire.