div height 100% de la "PAGE"

23 août 2011, 21:12

Bonsoir, j'aimerai savoir si quelqu'un aurait une solution css pour donner à un div la taille en hauteur de 100% de la page en cours (et non pas 100% de la taille de la fenêtre du navigateur), ceci afin d'éviter qu'au moindre ascenceur, la partie à scroller se retrouve sans background (puisque n'est pas étirée jusqu'en bas).

Merci de vos réponses, je n'en peux plus de jouer avec les min-height, height:auto, height;100% du body au conteneur en passant par la div... les position:absolute et compagnie, donc j'attends vos lumières

p.s : si vous voulez un exemple précis, je pourrais faire un schéma explicatif.

24 août 2011, 04:19

p.s : si vous voulez un exemple précis, je pourrais faire un schéma explicatif.

Oui ce sera plus facile de te répondre sur un cas précis. Le pb c'est que les css dépendent du contexte et donc c'est très difficile de répondre pour un cas général. C'est ce qui explique aussi que les logiciels WYSIWYG ne produisent généralement pas du code propre à moins de se limiter à des cas prévus.

24 août 2011, 13:22

Voici donc un schéma qui explique ce que je cherche à faire.

Actuellement, mon div #menu avec un min-height:100% correspond à 100% de la fenêtre du navigateur, hors je voudrais qu'il fasse la hauteur de la page complète (du div #main en gros).

Pour faire plus visuel, que a=c et non pas a=b comme c'est le cas actuellement.

J'espère que d'autres personnes ont rencontré ce problème et qu'ils sauront me répondre.

Merci d'avance.

(Je re-précise que je souhaiterai si possible une solution css, mais au pire si vous avez une astuce javascript du style window.onresize ou autre, je suis preneur aussi)

24 août 2011, 15:49

A priori ça n'est pas possible réellement, par contre tu peux voir des techniques de simulation ici :
http://www.alsacreations.com/static/gabarits/liste.html
ou encore ici :
http://www.intensivstation.ch/templates/

Bon courage!

24 août 2011, 16:50

Merci pour ces liens qui me sauront certainement utiles pour différents templates. Je vais essayer de suivre quelques pistes qui y sont énoncées. Si j'arrive à produire un code propre correspondant à ce que je cherche à faire, je n'hésiterai pas à le poster pour en faire profiter.

24 août 2011, 18:41

Dans le premier lien que t'a donné jojolapine, je crois me souvenir que ce que tu souhaites correspond au gabarit n°6.
C'est un peu délicat à mettre en place, mais ça fonctionne.

24 août 2011, 18:51

Voici ce que j'ai réussi à obtenir en mélangeant un exemple d'un de tes sites à mon code d'origine :

http://keyslash.com/lab/templates/2-col ... lumns.html

Ci-dessous,la base du fonctionnement.
Si vous souhaitez voir l'intégralité du code de ma page, n'hésitez pas afficher la source (ajout de quelques coquetteries css pour la mise en page)

<style>
   html,body { height: 100%; margin: 0;}
   #main  { margin: 0 auto;  width: 980px; min-height: 100%; background: url('background.jpg') repeat-y #FFF;}
   #menu { float: left; width: 240px; }
   #contenu { float: right; width: 740px;}
   #clear { clear: both;}
</style>

<body>
  <div id="main">
    <div id="menu">
        <ul>
          <li><a href="#">MENU 1</a></li>
          <li><a href="#">MENU 2</a></li>
        </ul>
    </div>
    <div id="contenu">
      <p>Lorem ipsum dolor</p>
    </div>
    <div id="clear"></div>
  </div>
</body>
</html>

Edit : Je viens de voir ton message AB, en effet j'ai pris cet exemple comme base

Merci à vous deux !

25 août 2011, 11:41

A priori ça n'est pas possible

C'est tout à fait faisable:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>layout.global</title>    
    <style type="text/css">
			/* resetting */
    	html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,menu,time,mark,audio,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}article,aside,figure,footer,header,hgroup,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{border:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}table{border-collapse:collapse;border-spacing:0;font-size:inherit;font:100%}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}body{font-size:small;font:x-small;line-height:1.22}select,input,textarea{font:99% arial,helvetica,"Nimbus Sans L", "Bitstream Vera Sans", sans-serif}code,pre{font-family:"Courier New", monospace, serif;font-size:1em}body,select,input,textarea{color:#444}textarea{-moz-appearance:textfield;-webkit-appearance:textfield}h1,h2,h3,h4,h5,h6{font-weight:700;text-rendering:optimizeLegibility}html{-webkit-font-smoothing:antialiased;/*overflow-y:scroll*/}a:active{outline:none}a:focus{outline:thin dotted}a,a:active,a:visited{color:#607890}a:hover{color:#036}ul{margin-left:30px}ol{margin-left:30px;list-style-type:decimal}small{font-size:85%}strong,th{font-weight:700}td,td img{vertical-align:top}sub{vertical-align:sub;font-size:smaller}sup{vertical-align:super;font-size:smaller}pre{white-space:pre-line;word-wrap:break-word;padding:15px}input[type=checkbox]{vertical-align:baseline}a[href],input[type=submit],input[type=image],label[for],select,button,.pointer{cursor:pointer}a:link{-webkit-tap-highlight-color:#FF5E99}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}input[type=radio],.ie6 input{vertical-align:text-bottom}::-moz-selection,::selection{background:#000;color:#fff;text-shadow:none}@media print{*{background:transparent!important;color:#444!important;text-shadow:none}a,a:visited{color:#444!important;text-decoration:underline}a:after{content:" (" attr(href) ")"}abbr:after{content:" (" attr(title) ")"}.ir a:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}img{page-break-inside:avoid}@page{margin:.5cm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}
			
			/* global */
			html, body {	
				width:100%;
				height:100%;
				overflow:hidden;
			}
			
			body {
				background-color:#FFFFFF;
				color:#666666;
				font: 12px/1.231 Verdana, Arial, Sans Serif;
			}
			
			/* GLOBAL */
			#global {
			}
			
			/* LEFT MENU */
			#leftpanel {
				position:fixed;
				top:0px;
				bottom:0;
				left:0;
				width:150px;					
				z-index:500;
				background-color:#232323;
			}
				
			/* MAIN */
			#main {
				position:fixed;
				top:0px;
				right:0;
				left:150px;
				bottom:0;
				background-color:#F9F9F9;
				overflow-x:auto;
				overflow-y:scroll;
			}
    </style>
	</head>
	<body>

    <!-- GLOBAL -->
    <div id="global">
    
      <!-- LEFT PANEL -->
      <div id="leftpanel">
        
        LEFT
        
      </div>
      <!-- END LEFT PANEL -->
      
      <!-- MAIN -->
      <div id="main">
      
        MAIN    
        
      </div>
      <!-- END MAIN -->    
     
      
    </div>
    <!-- END GLOBAL -->
    
  </body>
</html>

29 août 2011, 05:35

@Yosh

J'ai pas testé dans le détail mais je vois que tu utilises l'attribut "position:fixed;" non reconnu par IE6...

Oui enfin je garde ton exemple en mémoire car c'est les derniers mois que je fais du code encore compatible IE6. Début de l'année prochaine je prend une bonne résolution et je largue la compatibilité avec ce navigateur, enfin !

29 août 2011, 09:10

@Yosh

J'ai pas testé dans le détail mais je vois que tu utilises l'attribut "position:fixed;" non reconnu par IE6...

Oui enfin je garde ton exemple en mémoire car c'est les derniers mois que je fais du code encore compatible IE6. Début de l'année prochaine je prend une bonne résolution et je largue la compatibilité avec ce navigateur, enfin !

Disons que je ne me pose plus ce problème vu que je fais des sites/applications pour un intranet et que la version officiel supporté est la 7 (bientôt la 9 avec la migration vers Windows 7 du parc).

div height 100% de la "PAGE"

Qui est en ligne