Rendre deux éléments CSS flottants de la même hauteur

J'ai deux éléments, qui peuvent varier dans les hauteurs et les deux flottait à côté de l'autre. Le problème, c'est qu'il a l'air assez moche si une case est plus élevé que les autres. Je tiens donc à être à la même hauteur.

Un sens, je pensais peut-travail serait trop envelopper dans un div conteneur et de l'espoir le plus haut redimensionne et le plus petit se dilate pour s'adapter à l'espace:

HTML:

<div id="outerBox">
<div class="innerBoxLeft"></div>
<div class="innerBoxRight"><br /><br /><br /></div>
</div>

CSS:

.outerBox
{
width: 100%;
}

.innerBoxLeft
{
float:left;
width: 45%;
height: 100%;
}

.innerBoxRight
{
float:right;
width: 45%;
height: 100%;
}

Ne fonctionne pas. Je crois que c'est peut-être parce que l'extérieur de la div n'a pas une hauteur donnée, et pour une raison que la petite boîte et c'est 100% de la hauteur n'a rien à travail sur. Je ne peux pas lui donner une hauteur donnée, cependant, parce que cela irait à l'encontre du point.

Donc, sauf si il y a une autre façon, je suppose que je suis de se demander: Comment puis-je configurer un enfant de l'élément de hauteur à celle de son parent?

Grâce

source d'informationauteur Damien | 2009-07-23

23

Pourquoi n'utilisez-vous pas un tableau?

Cela devient ridicule. L'utilisateur veut voir un tableau. Le langage HTML fournit un élément de tableau pour obtenir exactement l'objectif de l'utilisateur veut. Pourtant, nous utilisons un ensemble de la bibliothèque (j'ai une recherche à JQuery de réponse) pour atteindre l'objectif w/o d'une table, même si cela signifie un script qui s'exécute sur le client!
10

Je pense que les tableaux doivent être utilisés pour ce qu'ils ont été créés - et c'est le stockage de données, ne montrant pas de mise en page.

Si Vous le voulez bien, de la croix-navigateur & hack-CSS gratuit solution - voir cet article.
3

Vote de ce point jusqu'à l'infini si vous le souhaitez, mais je pense que je pourrais aussi bien wack cette partie de la conception d'une table...

Il y a plusieurs manières, avec différents degrés de complexité et de succès. Une technique qui fonctionne pour moi (~~je ne me souviens pas où je l'ai vu la première~~ lien problèmes) est la suivante:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>test</title>
    <style type="text/css">
        #page {
            clear:both;
            overflow:hidden;
            width:100%;
        }
        #page div {
            margin:0 0 -6000px 0; /* nothing special about 6000px */
            padding:0 0 6000px 0; /* any large enough value will do */
        }
        div.article {
            background:blue;
            float:left;
            width:70%;
        }
        div.sidebar {
            background:red;
            float:right;
            width:30%;
        }
    </style>
</head>
<body>

<div id="page">
    <div class="article">
        <p>Some content</p>
    </div>
    <div class="sidebar">
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
    </div>
</div>
</body>
</html>

2

Pourcentages fonctionnent rarement comme des hauteurs dans le CSS. L'enfant de la hauteur même en tant que parent, vous pouvez utiliser un peu de Javascript. Voici à quoi il pourrait ressembler dans jQuery:
```
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function() {      
            var containerheight = $("outerBox").height;
            $(".outerBox").children().css("height",containerheight)
    </script>
```
Si vous vouliez juste faire les boîtes à l'intérieur d'un conteneur de la même taille, le Filament Groupe a un plugin pour l'égalisation de la boîte de hauteurs avec jQuery et c'est très bien documenté:

Des Hauteurs égales Avec jQuery
2

Utilisation display:table-cell;

Ceci est très utile dans les deux colonnes de e-mail de conception(largeur réactive).

Vue démo ici.
1

Une façon de faire ce qui suit sans l'aide de JavaScript est au moyen d'une technique appelée Faux-Colonnes.

Il consiste essentiellement à appliquer un background-image pour le parent des éléments de la flottait éléments qui vous fait croire que les deux éléments sont de la même hauteur.

Plus d'informations disponibles sur:

Une Liste À Part: Articles: Faux Colonnes
1

Essayez ceci: http://www.filamentgroup.com/examples/equalHeights/

Il est un outil facile à utiliser le plugin jQuery, que vous pouvez simplement utiliser sur le conteneur parent et tout le haut niveau des éléments enfants sont réglés à la même hauteur que le plus haut.
1

Si tu voulais vraiment un div à agir comme un tableau, il vous suffit de personnaliser le css "display" de la div.

display:table pour le conteneur div

display:table-cell pour les div à l'intérieur pour agir en tant que td

function setSameHeight(class_name){
  var max_height = 0;
  var cards = getElementsByClassName(class_name);       
  for (var i=0; i<cards.length; i++){
    if (cards[i].offsetHeight > max_height){                
      max_height = cards[i].offsetHeight;
    }
  }
  for (var i=0; i<cards.length; i++){
    cards[i].setAttribute("height", max_height);
    cards[i].height = max_height;           
  }
}

function getElementsByClassName(className){
  var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
  var allElements = document.getElementsByTagName("*");
  var results = [];
  var element;
  for (var i = 0; (element = allElements[i]) != null; i++) {
    var elementClass = element.className;
      if (elementClass && elementClass.indexOf(className) != -1 &&     hasClassName.test(elementClass))
      results.push(element);
    }
    return results;
}

utilisé que pour les tables

function evenup(){
        var maxHeight = Math.max.apply(null, $(".myClass").map(function (){
            return $(this).height();
        }).get());  
    $(".myClass").height(maxHeight);
}

Vous devez vous connecter pour publier un commentaire.