Comment faire la hauteur d'une colonne 100%

J'utilise materialcss et en utilisant son carrousel. Carrousel intérieur, j'ai ajouté une ligne et deux colonnes qui ont un contenu différent.Mais le problème est la hauteur des colonnes ne sont pas pleins. Regardez cette capture d'écranComment faire la hauteur d'une colonne 100%

Le vert et les colonnes bleues doivent être de pleine hauteur de son div parent (le rouge) un.

J'ai appliqué height:100% mais cela n'a pas affecté. Quelqu'un peut m'aider?

Ceci est la sortie quand il est redimensionnée

J'ai ajouté css et html s'il vous plaît aidez-moi

.full-height { 
 
    height: 100% !important; 
 
} 
 

 
.reach-content { 
 
    background-color: #00695c; 
 
} 
 

 
.center-horizontal { 
 
    text-align: center; 
 
} 
 

 
.center-vertical { 
 
    vertical-align: middle; 
 
} 
 

 
.border { 
 
    border: 1px solid #00695c; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css"> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script> 
 

 
<div class="carousel carousel-slider center" data-indicators="true"> 
 
    <div class="carousel-item red" href="#one!"> 
 
    <div class="row"> 
 
     <div class="col m8 blue full-height"> 
 
     <h2>First Panel First firstFirst First</h2> 
 
     </div> 
 
     <div class="col m4 reach-content white-text"> 
 
     <h1>20</h1> 
 
     <h5 class="white-text">Projects</h5> 
 
     <p class="white-text">Successfully completed and delivered</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="carousel-item amber white-text" href="#two!"> 
 
    <h2>Second Panel</h2> 
 
    <p class="white-text">This is your second panel</p> 
 
    </div> 
 
    <div class="carousel-item green white-text" href="#three!"> 
 
    <h2>Third Panel</h2> 
 
    <p class="white-text">This is your third panel</p> 
 
    </div> 
 
    <div class="carousel-item blue white-text" href="#four!"> 
 
    <h2>Fourth Panel</h2> 
 
    <p class="white-text">This is your fourth panel</p> 
 
    </div> 
 
</div>

Source

2017-08-01 Alen

essayez height:100vh; au lieu de height:100%;

Source

2017-08-01 19:42:30

Qu'est-ce que c'est? – Alen

Unités de longueur représentant 1% de la taille de la fenêtre pour la hauteur de la largeur de la fenêtre (vh). Je n'ai jamais eu de succès en fixant des hauteurs en pourcentages. également, je n'ai pas pu afficher le code que vous avez collé, donc je ne vois pas avec quoi vous travaillez, mais je soupçonne également que l'un de vos divs plus haut dans votre hiérarchie DOM doit également avoir '.full-height' appliqué à elle. –

Vous pouvez également résoudre ce problème en ajoutant ceci dans votre feuille de style:

.col{min-height: 1000px !important;}

Il remplace la hauteur de 1px min par défaut dans le css se matérialisent.

Source

2017-08-01 21:37:13 CaptainAmericaIRL

Comment faire la hauteur d'une colonne 100%

Répondre

Questions connexes