Aller au contenu

Aide sur hauteur 100% et overflow

Anaon

Par Anaon
dans (X)HTML et CSS

 Partager

Sujets conseillés

Anaon

Anaon

Posté
Posté

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 :P

Lien vers le commentaire
Partager sur d’autres sites
fguilbert

fguilbert

Posté
Posté (modifié)

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é par fguilbert
Lien vers le commentaire
Partager sur d’autres sites
Anaon

Anaon

Posté
  • Auteur
Posté

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?

Lien vers le commentaire
Partager sur d’autres sites
Dudu

Dudu

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
Anaon

Anaon

Posté
  • Auteur
Posté
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...

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...