Aide sur hauteur 100% et overflow

Anaon · 22 Février 2006

Bonjour,

Voilà quelques jours que je me documente et que je fais des essais, sans grand succès pour l'instant. L'objectif? Avoir une div qui fasse toujours 100% de la fenêtre en hauteur, avec un ascenseur si besoin est.

En fait j'aimerais utiliser ce modèle : http://css.alsacreations.com/modeles/modele11.htm

Et faire en sorte que la partie mauve soit toujours aggrandie et que le footer soit en bas. Voyez-vous ce que je veux dire?

Pour l'instant, j'ai l'impression que le "overflow:auto" de la div mauve empêche le bon fonctionne du code pour l'affichage en 100% de hauteur.

height: auto !important; 
height: 100%; 
min-height: 100%;

Pensez-vous que ce que je souhaite faire est possible ou pas? Histoire de ne pas chercher en vain

Merci beaucoup

Anaon · 23 Février 2006

En fait j'avais trouvé il y a quelques temps une solution avec display:table-cell mais impossible de retrouver exactement la façon dont on utilise cet attribut...

Kreestal · 24 Février 2006

Je me pose la même question, personne n'a une idée?? S'il vous plaît :blush:

fguilbert · 24 Février 2006

Hello,

Bon, j'espère avoir compris la demande, j'ai fait ça à l'arrache en reprenant du code de mon site, faudra sans doute nettoyer :

La feuille de style :

#conteneur
{  
	border:0px;
	width:791px;
	text-align:left;
	padding:0px;
	height:100%;
}  

.clear {
  clear:both;
  height:1px;
  overflow:hidden;
}  


/**************
Page Interne
*********/

#boxcentre
{
	background:white;
	height:100%;	
} 

#presentation_stat
{	
	float:left;
	margin:0px;
	background:white;
	border:1px solid #666666; 
	width:85%;
	height:100%;
} 

#presentation_stat #contenu_stat
{ 
overflow:auto;
padding:4px;
color:#333333;
font-family:Verdana; 
font-size:8pt; 
font-style: normal; 
font-weight: normal; 
text-align:left;
height:100%;
}

#presentation_stat #contenu_stat #header_stat
{ 
overflow:auto;
padding:0px;
color:#B4B4B4;
font-family:Verdana; 
font-size:8pt; 
font-style: normal; 
font-weight: bold; 
text-align:left;
}

L'exemple de page :

<html>
<!-- Date de création: 29/08/2005 -->
<head>
  <title>Nemo Connect - Présentation</title>
  <LINK href="./styles/styles_test.css" rel="stylesheet" type="text/css">   
</head>
<body>
<div id="conteneur"> 
	<div id="boxcentre">
  <div id="presentation_stat">
       <div id="contenu_stat">
      <div id="header_stat">
      Depuis lintégration de la solution dans vos locaux, jusquau paramétrage de vos terminaux, dans Nemo Connect, tout est compris !<br>
      Pas de coûts de licence, pas dadministration ou serveur spécifique à mettre en oeuvre, obtenez un maximum de résultats pour un minimum dinvestissements.<br><br>
      </div>
      <b>Un résultat garanti en 5 étapes maximum :</b><br>
      1. Un compte vous est ouvert sur nos serveurs de synchronisation,<br>
      2. Nous venons dans vos locaux pour configurer le service en fonction de votre serveur de messagerie et de vos contraintes de sécurité,<br>
      3. Nous configurons les anciens terminaux (sous réserve de leur compatibilité) que vous souhaitez intégrer,<br>
      4. Nous intégrons les nouveaux terminaux,<br>
      5. Les nomades de votre entreprise communiquent partout, à tout moment, en toute  sécurité.
      <center></center><br><br>
      <b>Autres points forts de Nemo Connect :</b><br>
   	 - Disponible à partir dun seul utilisateur<br>
   	 - Engagement sur 4 mois ou 1 an<br>
   	 - Indépendant des opérateurs télécoms<br>
   	 - Mise à disposition doutils de supervision de lactivité de vos nomades...<br>
      Depuis lintégration de la solution dans vos locaux, jusquau paramétrage de vos terminaux, dans Nemo Connect, tout est compris !<br>
      Pas de coûts de licence, pas dadministration ou serveur spécifique à mettre en oeuvre, obtenez un maximum de résultats pour un minimum dinvestissements.<br><br>
      
      <b>Un résultat garanti en 5 étapes maximum :</b><br>
      1. Un compte vous est ouvert sur nos serveurs de synchronisation,<br>
      2. Nous venons dans vos locaux pour configurer le service en fonction de votre serveur de messagerie et de vos contraintes de sécurité,<br>
      3. Nous configurons les anciens terminaux (sous réserve de leur compatibilité) que vous souhaitez intégrer,<br>
      4. Nous intégrons les nouveaux terminaux,<br>
      5. Les nomades de votre entreprise communiquent partout, à tout moment, en toute  sécurité.
      <center></center><br><br>
      <img src="images/dot_orange.gif" border="0" alt="puce orange"> <b>Autres points forts de Nemo Connect :</b><br>
   	 - Disponible à partir dun seul utilisateur<br>
   	 - Engagement sur 4 mois ou 1 an<br>
   	 - Indépendant des opérateurs télécoms<br>
   	 - Mise à disposition doutils de supervision de lactivité de vos nomades...<br>
   	 - Disponible à partir dun seul utilisateur<br>
   	 - Engagement sur 4 mois ou 1 an<br>
   	 - Indépendant des opérateurs télécoms<br>
   	 - Mise à disposition doutils de supervision de lactivité de vos nomades...<br>
   	 - Disponible à partir dun seul utilisateur<br>
   	 - Engagement sur 4 mois ou 1 an<br>
   	 - Indépendant des opérateurs télécoms<br>
   	 - Mise à disposition doutils de supervision de lactivité de vos nomades...<br>
   	 </div> 
 	 
  </div> 
	</div> <!-- fin div boxcentre -->
</div>
</body>
</html>

Modifié 24 Février 2006 par fguilbert

Anaon · 24 Février 2006

Ah génial, merci beaucoup Je vais regarder ce qu'il en est

Anaon · 25 Février 2006

Alors j'ai pu essayer un peu et il semblerait que ce soit bien ça mais ça provoque un drôle de comportement à l'image de gond... Et le texte tend à dépasser de sa div...

Je crois que je vais faire plus simple mais j'aurais juste une question, IE prend bien en compte les div fixées non?

Dudu · 26 Février 2006

Bonjour

j'aurais juste une question, IE prend bien en compte les div fixées non?

Si par "fixées" tu entends un code tel que celui-ci

div {background-attachement: fixed;}

alors non ce n'est pas pris en compte par IE 6, et apparemment pas sur le futur IE 7 non plus.

Anaon · 26 Février 2006

Bonjour
Si par "fixées" tu entends un code tel que celui-ci
div {background-attachement: fixed;}
alors non ce n'est pas pris en compte par IE 6, et apparemment pas sur le futur IE 7 non plus.

<{POST_SNAPBACK}>

Oups je me suis mal exprimé mais ma question est bête, enfin avec toutes les différences IE/Autres navigateurs, je ne sais plus...

Je parlais simplement d'une petite div placée en haut à gauche (pour un menu par exemple) et qui resterait fixée en haut à gauche, même quand descend l'ascenseur de la page pour faire défiler le contenu. En fait, c'est exactement le type de gabarit qu'il me faut...

Connexion

Aide sur hauteur 100% et overflow

Sujets conseillés

Anaon

Anaon

Kreestal

fguilbert

Anaon

Anaon

Dudu

Anaon

Veuillez vous connecter pour commenter

Parcourir

Activité