Bonjour,

J'utilise bootstrap et j'ai deux colonnes auquelles j'ai donné une hauteur de 100% cependant une seule des deux accepte cette taille, l'autre ne fait qu'un pixel de haut.

Les colonnes en question sont la 'col-lg-1 degrade' et la 'col-lg-4', la 1 ne prends pas les 100% alors que la 4 oui. Comment remédier a ce problème ? J'aimerai que les deux ai la même hauteur (et pas une hauteur de 1px)

 <div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
        <div class="container-fluid concours">
            <div class="row content concours_desktop"<?php print $content_attributes; ?> style="background-image: url('<?php print file_create_url($node->field_image[LANGUAGE_NONE][0]["uri"]) ?>')">
                <div class="col-lg-7 col-xs-12" style="height: 100%;">
                    <div class="row">
                        <div class="title col-lg-8 col-lg-offset-2 col-xs-12" style="text-align: center; color: white;">
                            <?php print render($title_prefix); ?>
                            <h2 class="titre" <?php print $title_attributes; ?>><?php print mb_strtoupper($title); ?></h2>
                            <?php print render($title_suffix); ?>
                        </div>
                    </div>
                    <div class="row">
                        <div class="subtitle col-lg-5 col-xs-12">
                            <div class="circle" style="background: <?php print '#'.$button_color ?>; border-radius: 50%; color: white;">
                            </div>
                            <p><?php  print mb_strtoupper($content['field_texte'][0]['#markup']); ?></p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-1 degrade" style="height: 100%; background: linear-gradient(to right, rgba(<?php print hex2rgb($background_color)?>,0), rgba(<?php print hex2rgb($background_color) ?>,0.8) 100%);"></div>
                <div class="col-lg-4" style="background: <?php print $color_form ?>; height: 100%; background: linear-gradient(to right, rgba(<?php print hex2rgb($background_color)?>,0.8), rgba(<?php print hex2rgb($background_color)?>,1) 10%);">
                    <div class="row" style="text-align: center; padding-top: 10%; padding-bottom: 10%">
                        <img class="col-lg-4 col-lg-offset-4" src="/sites/all/themes/fm2014/img/logo_footer.png">
                    </div>

                    <div class="form_concours col-lg-10 col-lg-offset-1" style="text-align: center;">
                        <h3>Participer au jeu-concours</h3>
                        <?php print render($content['webform']);?>
                    </div>
                </div>
            </div>

            <!-- Affichage pour mobile et tablettes (elements en moins que sur l'affichage desktop) -->
            <div class="row content concours_mobile"<?php print $content_attributes; ?> style=" width: 100%; background-image: url('<?php print file_create_url($node->field_image[LANGUAGE_NONE][0]["uri"]) ?>')">
                <div class="row">
                    <div class="title" style="text-align: center; color: white;">
                        <?php print render($title_prefix); ?>
                        <h2 class="titre" <?php print $title_attributes; ?>><?php print mb_strtoupper($title); ?></h2>
                        <?php print render($title_suffix); ?>
                    </div>
                </div>
                <div class="row">
                    <div class="subtitle">
                        <p><?php  print mb_strtoupper($content['field_texte'][0]['#markup']); ?></p>
                    </div>
                </div>

                <div class="row">
                    <div class="form_concours col-xs-10 col-xs-offset-1" style="text-align: center;">
                        <h3>Participer au jeu-concours</h3>
                        <?php print render($content['webform']);?>
                    </div>
                </div>
            </div>

        </div>
    </div>

Merci d'avance.

-
Edité par Jessydan38 4 juin 2018 à 16:11:14

Au temps pour moi je vais chercher

-
Edité par Skytchup 4 juin 2018 à 16:07:18

Salut,

Oui, height ne fonctionne pas comme width. Un élément de structure fait toute la largeur disponible, mais juste la hauteur nécessaire à son contenu. De fait, si on met une valeur height en pourcentage, il n'a aucune valeur sur laquelle s'appuyer, il faut que son parent ait une hauteur définie.

Tout dépend surtout de ce que tu veux faire.

Autre chose, ne mets pas de classe sur les colonnes de bootstrap. Mets des blocs à l'intérieur de tes colonnes, plutôt.

Ce que j'aimerai c'est que les deux soit a la même hauteur (celle de l'element parent), mais même si je met height 100% a tout mes elements jusqu'au body rien n'y fait, ça reste a 1px :/

En fait il prends la hauteur de la boite parent, si le parent n'a aucun contenu alors forcément elle fera 1px.

Donc faut mettre en pixel si tu veux que ça marche.

Si la page de ton site était en ligne, j'aurai plus de faciliter à résoudre ton problème, utilise la fonction inspecter après un clic droit et essaye de rajouter petit à petit du code css ou d'en enlever pour résoudre le problème.

-
Edité par N.Parvedy 5 juin 2018 à 9:01:08

C'est bon j'ai réussi en utilisant les flexbox, merci

J'allais le dire, c'est flexbox que tu cherches ; ou bien grid-layout.