2 div à 100 % fonctione + ou -

sabine -  
 sabine -
Bonjour,

j'ai mis
un html et body à 100%
et un cadre jaune qui fat 100 % du navigateur donc ca fonctionne tres bien
j'ai rajoute des mot qui sera remplacer par un menu haut

en sous des mots j'ai rajouté un cadre rouge

comme cette exemple

https://fiddle.jshell.net/3g7smjd2/1/

le cadre rouge j'ai mis à 100% mais il dépasse sur le 1 er cadre jaune

comment lui dir de mettre le cadre rouge à 100% sans qu'il dépasse le 1 er cadre div

2 réponses

  1. patricia@84 Messages postés 114 Statut Membre 9
     
    Bonjour,

    Pouvez-vous donner votre script html et vos css ?
    0
  2. sabine
     
    voilà

    <!doctype html>
    <html lang="fr">
    <head>
      <meta charset="utf-8">
    <title>Document sans titre</title>
    <link rel="stylesheet" type="text/css" href="../../design/Basic/pardefault.css">
    </head>
    <body>
          <!--Début mini chat-->
    	  <!--cette class mini chat et à 100%-->
    	  <section class="mini-chat">
          <!---Début menu haut-->
    	  
    	  <nav><ol class="menu-horizon-mini-chat">
    	                                   <li class="icon-minichatfichier" title="Fichier"><a href="../module/portail.php" rel="nofollow" target="_blank" title="Fichier">Fichier</a></li>
    									   <li class="icon-minichatcontact" title="Contacts"><a href="../module/forum/index.php" rel="nofollow" target="_blank" title="Contacts">Contacts</a></li>
    									   <li class="icon-minichataction" title="Actions"><a href="../module/inscription/index.php" rel="nofollow" target="_blank" title="Actions">Actions</a></li>
    									   <li class="icon-minichatoutil" title="Outils"><a href="../module/inscription/index.php" rel="nofollow" target="_blank" title="Outils">Outils</a></li>
    									   <li class="icon-minichatversion" title="Version : 1.2"><a href="../module/rechercher/index.php" rel="nofollow" target="_blank" title="Version : 1.2">Version : 1.2</a></li>
    	  </ol></nav>
    	  
          <!---Fin menu haut-->
    	  	  <!--cette class mini-chat-salon-officielle-perso je veux qu'il soit à 100% qu'il s'arrete en bas du cadre mini chat hors llà il dépasse le cadre  mini chat-->
    
    <div class="mini-chat-salon-officielle-perso"></div>
    
    
    	  </section>
          <!--Fin mini chat-->
    
    </body>
    </html>
    


    /*********************************************************************************************************Début mini chat****************************************************************************************************************************************/
    
    	  html,body
    	  {
    	height:100%;
    	  }
    	  .mini-chat
    	  {
    	  height:100%;
    	  border:#CCCCCC solid 1px;
    	  }
    	  ol.menu-horizon-mini-chat li
    	  {
    	  border-right:1px solid #CCCCCC;
    	  position: relative;
    	  float: left;
    	  display: block;
    	  color: #D8D7D7;
    	  height:2em;
    	  line-height:2em;
    	  padding-left:1em;
    	  padding-right:1em;
    	  }
    	  
    	  .menu-horizon-mini-chat
    	  {
    /*  background-color:#68869a;*/
    /*	  background:linear-gradient(to bottom, #68869a 0%,#5a7f97 100%);*/
    	  height:2em;
    	  padding-left:0em;
    	  border-bottom:1px solid #CCCCCC;
    	  margin:0em;
    	  }
    	  
    	  olmenu-horizon-mini-chat li a
    	  {
    	  padding:1em;
    	  }
    /*************************début menu mini chat horizontal************************************************/
    	  .galerie-salon-officielle li
    	  {
    	  float: left;
          border:#CCCCCC 1px solid;
    	  margin:1em;
    	  width: 20em; /* 100%/3 = 3 colonnes */
    	  }
    
    	  .galerie-salon-officielle li p
    	  {
    	  border-top:#CCCCCC 1px solid;
    	  }
    /*************************Fin menu mini chat horizontal**************************************************/
    /*************************Début Des menu salon officielles et perso***********************************************/
    
    	  .mini-chat-salon-officielle-perso
    	  {
    	  height:97.2%;
    	  overflow-y:scroll;
    	  background-color:#006633;
          font-size:0.8em;
    	  font-weight:700;
    	  }
    
    
    /*************************Fin Des menu salon officielles et perso*************************************************/
    
    
    
    
    
    0
    1. sabine
       
      un petit up
      0