28172 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement en bas sur plusieurs colonnes

Bonjour, j'aurai besoin d'un petit coup de pouce.
Je souhaite avoir un présentation en colonne ou un bouton est positionné en bas.
Le problème c'est que le contenu dans la colonne va changer. Ce sont des modules promotionnels. donc je ne connais pas a l'avance la hauteur de ces colonnes.
Voila déjà le fruit de ma réflexion.
<html>
<head>
	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
.wrapper {
	display: block;
	position: relative;
	overflow: auto;

}
.col1, .col2 {
	display: block;
	position: relative;
	width: 49%;
	height: 100%;
	border: 1px red solid;
	clear: none;
	float: left;
	padding-bottom: 30px;
}

.read_more {
	display: block;
	height: 30px;
	background: #333;
	color: #eee;
	position: absolute;
	bottom:0px;
}
</style>


</head>
	<body>
		<div class="wrapper">
			<div class="col1">Column 1
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			<span class="read_more">bottom align</span></div>

			<div class="col2">Column 2
			<span class="read_more">bottom align</span></div>
		</div>
	</body>
</html>

Le div.wrapper a un overflow:auto; pour avoir une taille car son contenu est en float. Quand je l'inspecte il a bien une height.
Mes .col1 et .col2 ont un padding-bottom pour laisser la place a mon bouton .read_more.
Les colonnes ont un position: relative; pour permettre d'être l'origine de la position absolute des bouton.
Ce qui ne fonctionne pas comme je l'espérais c'est le height:100% des .col1 et .col2 qui prend comme référence la hauteur de la frame et non du div.wrapper.
Merci d'avance a tous les fans de kiwis qui voudront bien utiliser un peu de leur matière grise pour m'aider.
Modifié par iStuffs (21 May 2014 - 10:46)
Hello !

Tes 2 col flottants ne peuvent pas prendre une hauteur de 100% car la hauteur de son parent .wrapper n'est pas spécifiée.
Une solution pour que les 2 col prennent la hauteur de la frame et donc de la colonne la plus haute (si tu ne la connais pas en avance), serait en css de leur donner le comportement d'un table et du coup ne plus utiliser la propriété float :
.wrapper {
	display: table;
	position: relative;
}
.col1, .col2 {
	display: table-cell;
	position: relative;
	width: 50%;
	height: 100%;
	border: 1px red solid;
	padding-bottom: 30px;
}

En espérant que cette piste t'aidera !
Bonjour

Tous dépend du rendu esthétique recherché mais il est possible d’égaliser la hauteur des colonnes se trouvant sur une même rangé grâce à du javascript.

1. On mesure la hauteur de chaque colonne et on memorise la plus grande valeur;
2. On applique la valeur à chaque colonne;

Voici un exemple :


var p_panel_init = 0; //On initialise la hauteur à 0

 $('#categos .columns').each(function() { //on mesure la hauteur de chaque colonne, la hauteur de la colonne la plus haute sera la hauteur minimum à aplliquer aux autres...
        var p_panel_height = parseInt($(this).find('p').height());
        if(p_panel_height > p_panel_init) {
            p_panel_init = p_panel_height;
        }
    });

    //on applique la hauteur minimum à chaque colonne
    $('#categos .columns').each(function() {
        var p_margin = parseInt($(this).find('p').css('margin-bottom') + 1);
        var new_height = p_margin + p_panel_init;
        $(this).find('p').css('height', new_height);
    });
Merci a tout les codeurs sur-vitaminés qui se sont penchés sur mon problème.
Je penche plutôt du coté de la solution CSS display table
Sujet clos
Aller à