Div qui occupe 100% de la hauteur du div parent

Résolu/Fermé
getbackers19 Messages postés 131 Date d'inscription lundi 10 décembre 2012 Statut Membre Dernière intervention 24 novembre 2017 - Modifié par noctambule28 le 17/11/2015 à 15:24
getbackers19 Messages postés 131 Date d'inscription lundi 10 décembre 2012 Statut Membre Dernière intervention 24 novembre 2017 - 18 nov. 2015 à 15:39
Bonjour,

Je cherche désespérément le moyen pour que ma balise nav prenne 100% de la hauteur de mon header! c'est pour un exo dans le cadre d'une formation! code :

<header>
  
 <nav>
<div id="logo">
   <img src="logo.png" alt="logo" />
  </div>
  <ul>
   <li><a href="index.html">Home</a></li>
   <li><a href="portfolio.php">Portfolio</a></li>
   <li><a href="cv.php">CV</a></li>
   <li><a href="contact.php">Contat</a></li>
  </ul>   
 </nav>

</header>


merci d'avance pour votre aide



Faut que j'aille au toilette, ou sont mes écouteurs?

3 réponses

Utilisateur anonyme
17 nov. 2015 à 14:28
Sans montrer le CSS on ne peut pas aider...

Tu as essayé un height:100%; sur ta nav?
0
getbackers19 Messages postés 131 Date d'inscription lundi 10 décembre 2012 Statut Membre Dernière intervention 24 novembre 2017 6
Modifié par noctambule28 le 17/11/2015 à 15:23
Oups c'est vrai désolé ...

html {
 height: 100%;
 width: 100%;
}

body {
 height: 100%;
 width: 100%;
 max-width: 100%;
}

li {
 padding:0% 2% 0% 2%;
 display: inline-block;
}

ul {
 text-align: center;
 display: inline-block;
 padding:0;
 margin:0;
 width: 79%;
}

header {
 background-color: #1397A3;
}

@font-face{
 font-family: 'CaviarDreams';
 src:url('font/CaviarDreams.ttf');
}

a {
 font-family: CaviarDreams;
 text-decoration: none;
 color: #fff;
}

header nav img {
 width: 20%;
}


------------------------------------------------------------------------

<header>
 <nav>
 <img src="logo.png" alt="logo" />  
 
  <ul>
   <li><a href="index.html">Home</a></li>
   <li><a href="portfolio.php">Portfolio</a></li>
   <li><a href="cv.php">CV</a></li>
   <li><a href="contact.php">Contat</a></li>
  </ul>   
 </nav>

</header>



J'avais tenté le height oui sa n'avait pas fonctionné sa avait pris 100% du body je crois

Faut que j'aille au toilette, ou sont mes écouteurs?
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
17 nov. 2015 à 15:50
Salut,

Pour appliquer une hauteur de 100% en css, il faut que le parent ait une hauteur définie.
Pour appliquer height: 100% sur ta balise nav, il faut donc que tu définisses une hauteur à la balise header.

Bonne journée
0
getbackers19 Messages postés 131 Date d'inscription lundi 10 décembre 2012 Statut Membre Dernière intervention 24 novembre 2017 6
18 nov. 2015 à 15:39
Merci
0