Forum TT-Hardware : Mise en page en div avec 100% de hauteur + scroll




	\| Inscription \| \| Recherche \| \| FAQ \| \| Accueil \| \| Liste des membres \| \| Calendrier \|

1 visiteurs sur ce topic (0 membre(s), 1 invité(s) )

Auteur

Sujet : Mise en page en div avec 100% de hauteur + scroll

Baal-84 Sage Membre # 25325 Lieu : Lubéron Messages : 1736 (1.97 par jour) Score :	Message du 08-09-2007 @ 5:15 Hello. Je suis en train de bidouiller du code à ma modeste mesure et je suis tombé sur ces sites qui parlent de la mode de la mise en page en div. Ca a l'air bien sympa pour éviter les tableau mais par exemple je voudrais créer une mise en page genre header, zone centrale avec menu (gauche) et texte (droite) et un pied de page. Bon jusque là c'est pas compliqué, par contre je voudrais conserver une mise en page fixe et à 100% de l'écran, comme un découpage en frames, mais avec possibilité de scroller pour les textes longs ... c'ets là que ca coince, je peux scroller avec une taille fixe mais si je met taille à 100% ou auto avec un conteneur ca va faire la taille du texte, du coup le pied de page n'est plus visible. 1 est ce que vous avez compris ce que je veux dire ? 2 est ce que quelqu'un a une solution ? [edit]ça fait 3 plombes que je cherche et je tombe sur ça : http://www.clubic.com/forum/programmation/mise-en-page-div-css-compatibilite-ie-firefox-sans-nom-needed-id173102-page1.html Je verifie que ça marche bien ... Non c'ets pas ça, ca fait des cadre texte et pied de page proportionnels, moi je veux un pied de page à taille fixe. [message édité le 08-09-2007 @ 5:25 Par Baal-84]
	---------- AMD Dual Core 3800+ avec un chouet Zalman CNPS7000B , MOBO ASUS A8N5X avec HR-05 sur le chipset, 7900GT Point of View, 2go ram kingston, Boitier Antec sonata2, Lecteur graveur dvd pioneer, hitachi 7k80 (système) et T7k250 (data), moniteur Benq FP222W H, souris G5 laser
- Haut de page -

Joufflu Sage Membre # 14503 Lieu : Caen Messages : 1187 (0.73 par jour) Score :	Message du 08-09-2007 @ 12:52 salut, de bonnes infos ici : http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS
	---------- HP NC8430 - CoreDuo 1.83GHz - 2x1Go DDR2 667 - X1600 256Mo - 15.4" WXGA - Seagate 7200.2 200Go - Bluetooth 2.0 et Gigabit Ethernet IBM ThinkPad X23 - P3M 866 Mhz - 256Mo PC133 - 12" XGA - Hitachi DK23EA 40 Go - Win XP Pro SP1 - PCMCIA WiFi 3Com b/g XJACK Altec Lansing ACS 621 - Sennheiser PMX 60 - Smartphone : HTC Touch WM6 -> Test - Sagem PVR 66160T Decodeur TNT HDD 160Go -> Gestion de cave a vin en ligne ( gratuit ) : Votre Cave
- Haut de page -

Baal-84 Sage Membre # 25325 Lieu : Lubéron Messages : 1736 (1.97 par jour) Score :	Message du 08-09-2007 @ 13:41 Merci, mais c'est la mise en page de base que j'utilise. En fait je cherche quelque chose du genre modèle 12 mais avec une footer qui ferais genre 15px (et non pas un pourcentage, ça je sais que c'ets possible) et qui serait automatiquement en bas de la fenêtre. L'espace variable serait le texte et le menu.
	---------- AMD Dual Core 3800+ avec un chouet Zalman CNPS7000B , MOBO ASUS A8N5X avec HR-05 sur le chipset, 7900GT Point of View, 2go ram kingston, Boitier Antec sonata2, Lecteur graveur dvd pioneer, hitachi 7k80 (système) et T7k250 (data), moniteur Benq FP222W H, souris G5 laser
- Haut de page -

Maitre Kanter Moderateur par la même occasion...même pas en rêve Membre # 2522 Lieu : Felixstowe / Angleterre Messages : 3455 (1.36 par jour) Score :	Message du 10-09-2007 @ 20:07 tu peux copier ton code stp? edit: en prenant le code du 12, tu ajoutes ca Code : `.footer { height: 15px; width:100%; background-color: #99CCCC; position: absolute; bottom: 0; left: 0; }` après le .header par exemple. Ces c*ns ont oublié de le mettre dans leur code... Alors qu'ils font appel à la classe footer [message édité le 10-09-2007 @ 20:22 Par Maitre Kanter]
	---------- Pour savoir qu'un verre était de trop, encore faut-il l'avoir bu L'alcool est un ennemi. Celui qui fuit son ennemi est un lâche portable : Asus A6B00VA
- Haut de page -

Baal-84 Sage Membre # 25325 Lieu : Lubéron Messages : 1736 (1.97 par jour) Score :	Message du 11-09-2007 @ 0:35 Merci !!!! Il me semblait bien qu'y avait un truc bizarre. Maintenant et pour finir, y a un moyen que la zone texte de droite utilise toute la place restante ? Que ca s'ajuste automatiquement en s'allongeant vers le bas jusqu'au footer quand on change de résolution ou de taille de fenetre (tout en étant scrolable, ouais je sais je suis pénible) ? [edit]Est ce qu'il faudrait un sous conteneur pour la zone texte + menu ? Comme ça je peux les mettre en absolute ? Est ce que j'ai compris ? Je vais essayer ça déjà, mais si t'as la réponse bien sûr n'hesite pas [reedit] ah non j'ai viré le height 100% j'ai mis 0 en bottom et il se met à 0 pixel du bas ... je comprends ... lentement mais sûrement [rereedit] en virant la balise height et width sur firefox mes div s'étendent tout seul, mais pas sur IE ! Grr ! Y a un moyen à part tricher en mettant un tableau (vu que le but c'ets de pas en avoir ) ? [message édité le 11-09-2007 @ 1:08 Par Baal-84]
	---------- AMD Dual Core 3800+ avec un chouet Zalman CNPS7000B , MOBO ASUS A8N5X avec HR-05 sur le chipset, 7900GT Point of View, 2go ram kingston, Boitier Antec sonata2, Lecteur graveur dvd pioneer, hitachi 7k80 (système) et T7k250 (data), moniteur Benq FP222W H, souris G5 laser
- Haut de page -

Maitre Kanter Moderateur par la même occasion...même pas en rêve Membre # 2522 Lieu : Felixstowe / Angleterre Messages : 3455 (1.36 par jour) Score :	Message du 11-09-2007 @ 1:35 des infos : ici
	---------- Pour savoir qu'un verre était de trop, encore faut-il l'avoir bu L'alcool est un ennemi. Celui qui fuit son ennemi est un lâche portable : Asus A6B00VA
- Haut de page -

Baal-84 Sage Membre # 25325 Lieu : Lubéron Messages : 1736 (1.97 par jour) Score :	Message du 11-09-2007 @ 1:59 Roh j'étais sur le même forum mais je suispas tombé sur ce post merci encore ! [edit] mdr je comprends rien !! bon ben je laisse tomber pour l'instant je verrais ça un peu plus tard. Pour ceux que ça interesse voici le code Code : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>4</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- body { margin: 0; padding: 0; overflow: hidden; } .cont { width: 100%; height: 100%; } .header { height: 100px; background-color: #99CCCC; overflow: auto; } .menu { width : 150; top: 100; bottom: 15; left: 0; position: absolute; background-color:#CCCCFF; overflow: auto; } .frame { top: 100; left: 150; bottom: 20; right: 0; position: absolute; background-color:#9999CC; overflow: auto; } .footer { position: absolute; width:100%; background-color: #99CCCC; bottom: 0; left: 0; overflow: auto; } --> <style> </head> <body> <div class="cont"> <div class="header">contenu du header <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a> </div> <div class="menu"> menu gauche de largeur fixe : 150px <ul class="menugauche"> <li><a href="">Menu 1</a></li> <li><a href="">Menu 2</a></li> </ul> </div> <div class="frame">Début partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable partie "frame" scrollable Fin </div> </div> <div class="footer">contenu du footer </div> <body> <html> Donc copié à partir d'alsacréation et nettoyé par mes soins. J'ai mis un overflow hidden sur le body parce que je sais pas pourquoi y a qq pixels qui dépassent et les ascenseurs s'affichent pour rien. Mais c'ets pas bien grave puisque le contenu est dans le conteneur "cont", qui lui a un overflow sur auto. Si vous testez le code avec IE et firefox vous verrez ce que je veux dire : sur firefox les cases sont étendues correctement et l'overflow fonctionne. Sur IE ca merdouille total J'ai jeté un coup d'oeil sur le lien que tu m'as donné mais c'ets beaucoup trop compliqué, y a plusieurs fois les mêmes ID, je savais même pas qu'on pouvait le faire et du coup je sais pas à quoi ca sert ... bref ! Tout ça pour ne pas utiliser de tableaux ou de frames ... [message édité le 11-09-2007 @ 4:02 Par Baal-84]
	---------- AMD Dual Core 3800+ avec un chouet Zalman CNPS7000B , MOBO ASUS A8N5X avec HR-05 sur le chipset, 7900GT Point of View, 2go ram kingston, Boitier Antec sonata2, Lecteur graveur dvd pioneer, hitachi 7k80 (système) et T7k250 (data), moniteur Benq FP222W H, souris G5 laser
- Haut de page -

Maitre Kanter Moderateur par la même occasion...même pas en rêve Membre # 2522 Lieu : Felixstowe / Angleterre Messages : 3455 (1.36 par jour) Score :	Message du 11-09-2007 @ 8:58 déjà un conseil (je regarderai le code ce soir car là il faut que j'aille bosser): mets le code css dans un document séparé car ca va vite devenir le broll ton site
	---------- Pour savoir qu'un verre était de trop, encore faut-il l'avoir bu L'alcool est un ennemi. Celui qui fuit son ennemi est un lâche portable : Asus A6B00VA
- Haut de page -

Baal-84 Sage Membre # 25325 Lieu : Lubéron Messages : 1736 (1.97 par jour) Score :	Message du 11-09-2007 @ 11:20 En fait j'ai plusieurs fichiers avec des tests, donc pour l'instant je laisse tout dans le même fichier à chaque fois pour pas que ça soit trop la pagaille justement. Dès que je trouve quelque chose qui fonctionne je le met en css externe. En tk c'est sympa d'y jeter un oeil.
	---------- AMD Dual Core 3800+ avec un chouet Zalman CNPS7000B , MOBO ASUS A8N5X avec HR-05 sur le chipset, 7900GT Point of View, 2go ram kingston, Boitier Antec sonata2, Lecteur graveur dvd pioneer, hitachi 7k80 (système) et T7k250 (data), moniteur Benq FP222W H, souris G5 laser
- Haut de page -

Maitre Kanter Moderateur par la même occasion...même pas en rêve Membre # 2522 Lieu : Felixstowe / Angleterre Messages : 3455 (1.36 par jour) Score :	Message du 11-09-2007 @ 21:51 Un peu de nouveau. Apparemment, tu testes sous IE et je te souhaite la bienvenue dans les problemes de compatibilité IE6, IE7, FF, Opera, ... Code CSS Code : `body { margin: 0; padding: 0; } .cont { width: 100%; min-height: 100%; } .header { height: 100px; background-color: #99CCCC; } .menu { width : 150; top: 100; bottom: 15; left: 0; position: absolute; background-color:#CCCCFF; } .frame { top: 100; left: 150; bottom: 20; right: 0; position: absolute; background-color:#9999CC; overflow: auto; } .footer { position: absolute; width:100%; background-color: #99CCCC; bottom: 0; left: 0; }` Code html Code : <html> <!-- Date de création: 29/08/2005 --> <head> <title>Nemo Connect - Présentation</title> <link href="./css.css" rel="stylesheet" type="text/css"> </head> <body> <div class="cont"> <div class="header">contenu du header <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a> </div> <div class="menu"> menu gauche de largeur fixe : 150px <ul class="menugauche"> <li><a href="">Menu 1</a></li> <li><a href="">Menu 2</a></li> </ul> </div> <div class="frame">Début partie "frame" scrollable 1 partie "frame" scrollable 2 partie "frame" scrollable 3 partie "frame" scrollable 4 partie "frame" scrollable 5 partie "frame" scrollable 6 partie "frame" scrollable 7 partie "frame" scrollable 8 partie "frame" scrollable 9 partie "frame" scrollable 10 partie "frame" scrollable 11 partie "frame" scrollable 12 partie "frame" scrollable 13 partie "frame" scrollable 14 partie "frame" scrollable 15 partie "frame" scrollable 16 partie "frame" scrollable 17 partie "frame" scrollable 18 partie "frame" scrollable 19 partie "frame" scrollable 20 partie "frame" scrollable 21 partie "frame" scrollable 22 partie "frame" scrollable 23 partie "frame" scrollable 24 partie "frame" scrollable 25 partie "frame" scrollable 26 partie "frame" scrollable 27 partie "frame" scrollable 28 partie "frame" scrollable 29 partie "frame" scrollable 30 partie "frame" scrollable 31 Fin </div> </div> <div class="footer">contenu du footer </div> <body> <html> ATTENTION: ca ne fonctionne pas sous IE car il ne comprend pas le min-height... Je cherche encore pour trouver qq chose d'universel.
	---------- Pour savoir qu'un verre était de trop, encore faut-il l'avoir bu L'alcool est un ennemi. Celui qui fuit son ennemi est un lâche portable : Asus A6B00VA
- Haut de page -

Maitre Kanter Moderateur par la même occasion...même pas en rêve Membre # 2522 Lieu : Felixstowe / Angleterre Messages : 3455 (1.36 par jour) Score :	Message du 11-09-2007 @ 22:16 regarde un peu ca: cadeau [message édité le 11-09-2007 @ 22:17 Par Maitre Kanter]
	---------- Pour savoir qu'un verre était de trop, encore faut-il l'avoir bu L'alcool est un ennemi. Celui qui fuit son ennemi est un lâche portable : Asus A6B00VA
- Haut de page -

Baal-84 Sage Membre # 25325 Lieu : Lubéron Messages : 1736 (1.97 par jour) Score :	Message du 12-09-2007 @ 11:36 Et bien merci beaucoup t'as été tenace ! Vraiment merci, ça m'évite de trop cogiter avant mes examens Me reste plus qu'à faire la mise en page et le footer mais le site est bien expliqué ce coup ci ça devrait être simple. a+
	---------- AMD Dual Core 3800+ avec un chouet Zalman CNPS7000B , MOBO ASUS A8N5X avec HR-05 sur le chipset, 7900GT Point of View, 2go ram kingston, Boitier Antec sonata2, Lecteur graveur dvd pioneer, hitachi 7k80 (système) et T7k250 (data), moniteur Benq FP222W H, souris G5 laser
- Haut de page -

Baal-84 Sage Membre # 25325 Lieu : Lubéron Messages : 1736 (1.97 par jour) Score :	Message du 12-09-2007 @ 13:51 Pour ceux qui s'arrachent les cheveux voici le code Le css normal Code : <style TYPE="text/css"> <!-- html{overflow:hidden; } body { overflow: hidden; padding: 0; margin: 0; width: 100%; height: 100%; background-color: black; } #top { padding: 0; margin: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 80px; overflow: hidden; background-color: lime; } #side { padding: 0; margin: 0; position: absolute; top: 80px; left: 0px; bottom: 20px; width: 200px; overflow: auto; background-color: green; } #main { padding: 0; margin: 0; position: absolute; top: 80px; left: 200px; right: 0px; bottom: 20px; overflow: auto; background-color: blue; } #foot { padding: 0; margin: 0; position: absolute; bottom: 0px; left: 0px; right: 0px; width: 100%; height:20px; overflow: auto; background-color: yellow; } --> <style> Le CSS d'exception spécial IE Code : `<style TYPE="text/css"> <!-- #main { height:expression(document.body.clientHeight-100); width:expression(document.body.clientWidth-200); } #side { height:expression(document.body.clientHeight-100); } --> <style>` Enfin le code html Code : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>B1</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="B1-mise%20en%20page%20franciscopuig.css"> <!--[if IE]> <link rel="stylesheet" type="text/css" href="B1-mise en page franciscopuig-ie.css" /> <![endif]--> </head> <body> <div id="top"> <div class="content"> <h2>Header</h2> </div> </div> <div id="side"> <div class="content"> <h2>Sidebar</h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. . Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. . Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac </div> </div> <div id="main"> <div class="content"> <h2>Main content</h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. . Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. . Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. . Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac </div> </div> <div id="foot"> <div class="content"> <h2>Main content</h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. . Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget elit. Donec pulvinar. Fusce non est ac </div> </div> <body> <html> Beaucoup de texte mais c'ets pour bien voir l'overflow sans bidouiller la taille du browser sans arret. Voila ...
	---------- AMD Dual Core 3800+ avec un chouet Zalman CNPS7000B , MOBO ASUS A8N5X avec HR-05 sur le chipset, 7900GT Point of View, 2go ram kingston, Boitier Antec sonata2, Lecteur graveur dvd pioneer, hitachi 7k80 (système) et T7k250 (data), moniteur Benq FP222W H, souris G5 laser
- Haut de page -

Plan du forum | Contacter l'administrateur

Powered by SoulBB 3.0.1
© Soulmanto, 2003-2006

Page générée en 0.14 secondes