Webmaster Hub > Aide sur hauteur 100% et overflow

Version complète: sur le forum Webmaster Hub : Aide sur hauteur 100% et overflow

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Anaon

mercredi 22 février 2006 à 19:49

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.

CODE

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

jeudi 23 février 2006 à 12:59

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

vendredi 24 février 2006 à 10:50

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

fguilbert

vendredi 24 février 2006 à 12:15

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 :

CODE

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

CODE

<html>

<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 l’intégration de la solution dans vos locaux, jusqu’au paramétrage de vos terminaux, dans Nemo Connect, tout est compris !<br>
Pas de coûts de licence, pas d’administration ou serveur spécifique à mettre en oeuvre, obtenez un maximum de résultats pour un minimum d’investissements.<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 d’un seul utilisateur<br>
     - Engagement sur 4 mois ou 1 an<br>
     - Indépendant des opérateurs télécoms<br>
     - Mise à disposition d’outils de supervision de l’activité de vos nomades...<br>
Depuis l’intégration de la solution dans vos locaux, jusqu’au paramétrage de vos terminaux, dans Nemo Connect, tout est compris !<br>
Pas de coûts de licence, pas d’administration ou serveur spécifique à mettre en oeuvre, obtenez un maximum de résultats pour un minimum d’investissements.<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 d’un seul utilisateur<br>
     - Engagement sur 4 mois ou 1 an<br>
     - Indépendant des opérateurs télécoms<br>
     - Mise à disposition d’outils de supervision de l’activité de vos nomades...<br>
     - Disponible à partir d’un seul utilisateur<br>
     - Engagement sur 4 mois ou 1 an<br>
     - Indépendant des opérateurs télécoms<br>
     - Mise à disposition d’outils de supervision de l’activité de vos nomades...<br>
     - Disponible à partir d’un seul utilisateur<br>
     - Engagement sur 4 mois ou 1 an<br>
     - Indépendant des opérateurs télécoms<br>
     - Mise à disposition d’outils de supervision de l’activité de vos nomades...<br>
     </div>

</div>
    </div> 
</div>
</body>
</html>

Anaon

vendredi 24 février 2006 à 16:43

Ah génial, merci beaucoup

Je vais regarder ce qu'il en est

Anaon

samedi 25 février 2006 à 20:24

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

dimanche 26 février 2006 à 04:37

Bonjour

CITATION(Anaon @ samedi 25 février 2006, 20h24)

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

CODE

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

dimanche 26 février 2006 à 09:52

CITATION(Dudu @ dimanche 26 février 2006, 04h37)

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

CODE

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.

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...

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.