CSS: hauteur égalité divs sans hack marge

Pouvez-vous faire deux divs ont la même hauteur sansCSS: hauteur égalité divs sans hack marge

1) hacks de marge parce que je ne peux pas avoir une frontière:

margin-bottom : -500px; 
padding-bottom : 500px;

2) Javascript car alors il y a un scintillement sur la page pour les utilisateurs non mis en cache.

3) Hauteur fixe car je ne peux pas ajouter plus de contenu dynamiquement.

Il est pour cette page http://www.stdicon.com/ pour les deux divs au milieu (qui sont actuellement dimensionnées à JS, mais je préférerais une solution pure CSS)

Source

2009-09-26 Paul Tarjan

En supposant que vous ne se soucient pas de liquidité/zoom, Prenez une capture d'écran horizontale de 1 pixel de haut de la plus grande partie de l'orange rose et clair, et faites-en un arrière-plan à répétition verticale derrière les deux divisions.

Source

2009-09-26 05:43:39

Peut-être l'approche Columns Faux peut résoudre votre problème

Faux Columns

Source

2009-09-26 07:09:33 Jaxwood

Utilisez absolument positionnés divs imbriqués dans un emballage relativement positionné pour créer l'égalité des colonnes de hauteur en procédant comme suit:

Créer les colonnes utilisant le bloc en ligne
Créez un div wrapper autour de toutes les colonnes et réglez-le pour qu'il soit relativement positionné
Placer un div positionné en dernier en tant que dernier élément à l'intérieur du div wrapper
Définissez le div positionné en absolu sur {bottom: 0; hauteur: 100%; indice z: -1; }
définir la largeur de la div en position absolue égale à la largeur de la première colonne
Régler la gauche de décalage de la div en position absolue afin qu'il recouvre la première colonne
Régler la couleur de bordure et de fond souhaitée du la position absolue div
Répétez cette étape pour les autres colonnes si nécessaire

Voici un exemple:

<!doctype html> 
<html> 
<head> 
    <title>Equal Height Columns</title> 
    <meta charset="utf-8"> 
    <style> 
    /* Wrapper */ 
    .wrapper { position: relative; } 
    /* Column */ 
    .column { display: inline-block; vertical-align: top; } 
    /* Layered Illusion */ 
    .equalizer { position: absolute; bottom:0; left: 0; height: 100%; z-index: -1; } 
    /* Border for Column and Illusion */ 
    .equalizer, .column { border: 1px solid red; border-width: 0 1px; width: 200px; } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
    <div id="first" class="column"> 
     <span>hello</span> 
    </div> 
    <div class="column"> 
     <div> 
     <p>hi</p> 
     <p>there</p> 
     </div> 
    </div> 
    <div class="column"> 
     <span>there</span> 
    </div> 

    <div class="equalizer"></div> 
    </div> 
</body> 
</html>

Source

2012-06-21 18:41:49

CSS: hauteur égalité divs sans hack marge

Répondre

Questions connexes