28173 sujets

CSS et mise en forme, CSS3

Probleme de "height: 100%;"

Bonjour à tous.
Je désire créer un petit site web en ".free.fr" respectant les standards xhtml et css.
J'utilise donc une feuille de style en css pour la mise en page mais je rencontre un problème. Je pense que un petit lien vaut mieux qu'un long discours: http://nierdz.free.fr/test1.php
Bon alors voila la tout va bien car en effet dans le div "main" il y a du contenu pour étirer la div "middle" et donc la page en hauteur.
Mais quand la page est vide cela donne ceci :
http://nierdz.free.fr/test.php
Je me demande donc comment faire pour étirer la div main jusqu'en bout de page même si celle ci est vide (excepté un définissant une taille en px ou en % car cela rajoute un second ascenseur)
Je met un dernier lien histoire de vous montrer le résultat désiré mais sans le deuxième ascenseur collé au différentes div.
http://nierdz.free.fr/test2.php
Bon bah j'espère que quelqu'un aura une solution a ce problème car j'ai passé un paquet de temps la dessus sans résultat...


édit: je précise que tous le code (CSS inclus) est contenu dans la source de la page pour y accéder plus facilement.
Modifié par nierdz (26 Dec 2006 - 06:00)
Administrateur
nierdz a écrit :
Je me demande donc comment faire pour étirer la div main jusqu'en bout de page même si celle ci est vide

Hello,

Pour cela, il faut définir une "min-height".

Ce récent tutoriel l'illustre très bien.

Bonne chance Smiley smile
Merci mais malheureusement j'ai déjà utilisé cette méthode mais cela ne marche pas... En effet j'ai une div container ayant un paramètre min-height a 100% qui contient toutes les autres div mais cela ne me permet pas d'étirer les fenêtres Smiley confus .
De plus ce tuto est un peu ambigus car le code décrit dans la page n'est pas exactement le même que celui utilisé en réalité quand on regarde les sources de la page... ce qui pour un débutant comme moi est déroutant car je ne peux pas comprendre le code dans son intégralité.
Peut-être pourrait tu jeter un rapide coup d'oeil à mes sources pour voir si tu voyais un problème avec l'utilisation de min-height? Smiley confused
Bonjour,

Il fut que tu appliques le min-height à #midlle.
#middle{
	overflow: auto;
	width: 100%;
	margin: auto;
	background: yellow;
	height: 80%;
}

html>body #midlle { 
	min-height: 80%;
}


En faisant varier le %, tu donneras une valeur mini à la hauteur de ta page par contre en cas de dépassement, tu auras une barre de scroll sur ce bloc, le contenu ne poussera pas le bloc vers le bas
Salut ghost!
Merci pour ta réponse qui touche presque au but! Smiley biggrin
Seulement il reste encore un détail qui me taquine...
En effet j'ai testé ta solution sur le lien suivant
http://nierdz.free.fr/test.php
ça marche nickel avec du contenu ou sans c'est exactement ce qu'il me faut seulement j'aurai aimé que cela s'adapte selon les résolutions.
Je m'explique: si je met la div middle à 80% et étant donné que je veux avoir des hauteurs en pixels fixe pour mon top ainsi que mon bottom (respectivement 100 et 50 px) je vais avoir un blanc sous ma page dans des résolutions plus grandes que 1024*768 et je viens également de m'apercevoir qu'en 1024 j'ai deux ascenseurs...
Peut être une autre idée pour remédier a cela?? Smiley cligne
Re,

Si j'ai bien compris ce que tu veux... Changement de tactique !
On se sert du bloc menu comme pseudo min-height et on bloque le footer en bas de page en absolute, ce qui permet d'avoir un height minimum en cas de page moins longue et un conteneur qui suit son contenu au cas ou la page s'allonge ... Bon à voir si l'idée te convient.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />	
<title>TEST</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

#container {
	position: relative;
	margin: auto;
	width: 1000px;
	height: 500px; 
}
 

#top {
	margin: auto;
	width: 100%;
    height: 100px;
	background: red;
}

#middle{
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: auto;
	background: yellow;

}

#leftmenu {  
	float: left;
	width: 150px;
	background: yellow;
	height: 400px; /* à définir : sert de min-height */	

}

#bottom {
	position: absolute;
	height: 50px;
	bottom:0;
	width: 100%;
	background: green;
	text-align:center;
	clear: both;
}

#main {
	margin-left: 155px;
}

</style>

</head>

<body>


<div id="container">
	<div id="top">
	TOP
	</div>
	<div id="middle">	
		<div id="leftmenu">
			leftmenu
		</div>
		<div id="main">
<pre>
h
h
h
h
h
h
h
h
h
h
h
h

h
h
h
h
h
h
h
h
h
h
h
h
h

h
</pre>
			main

		</div>
		<div id="bottom">
	BOTTOM
		</div>	
	</div>
</div>

</body></html>
Alors le truc c'est que visiblement tu as bien compris ce que je voulais faire mais ça ne marche pas... Smiley lol
Je viens de tester le code au boulot (sous zindoze) avec firefox et ie.
Peut etre que ca marche sous nux?? Smiley rolleyes
Je ne peux donc pas mettre le resultat en ligne. (boulot inside)
Mais en 1280 il y a un espace blanc sous le footer quand la div main n'est pas remplie.
Par contre en la remplissant c'est nickel car l'ascenseur se cale bien sur le coté de la page et non sur les blocs.
Mais toujours ce probleme de hauteur de main qui ne prend pas le reste de la place en cas de page vide.
Une autre idée peut etre?
Merci en tout cas de repondre ghost Smiley cligne
Bonjour,

Grosso modo uniquement en css, tu as 2 possibilités soit tu travailles en min-height et il n'est plus possible d'allonger le bloc au dela de la hauteur de la page ce qui impose une barre de scroll au niveau du bloc en cas de débordement, soit en plaçant un bloc servant ( ton bloc gauche) de "cale" en height fixe ce qui va biensûr en fonction de la taille de la fenêtre poser des problèmes esthétiques...

On peut via java script (je pense) contourner le problème et déterminer dynamiquement la hauteur du bloc servant de "cale" permettant d'obtenir l'effet désiré mais c'est une autre histoire ...

Bon courage
Re!
Bon alors en fait je vais faire un mix de tes deux dernières propositions. Smiley lol
Je pense que je vais utiliser la taille de leftmenu en tant que min-height et que je vais adapter sa hauteur en fonction de la résolution à l'aide d'un javascript
Merci pour le coup de main! Smiley cligne
Bonjour,

Juste pour le fun (je n'ai pas tout testé !!)
En fait c'est un mélange de JS qui permet de calculer non pas la hauteur de l'écran mais la hauteur de la fenêtre du navigateur ( la nuance a son importance ) de transmettre par $_get cette valeur à php qui te permet à son tour de calculer la hauteur necessaire de "leftmenu" (hauteur fenetre - 100 ton header) et enfin de définir dans le code html le weight de ce bloc...

Une bricole ou deux qu'il faudrait préciser, c'est que la balise <html> doit être placée avant le doctype ... (Est ce que cela géne ??) sinon la valeur de la hauteur reste à 0 et que le test JS ne prend pas en compte la hauteur de l'ascenseur horizontal (20px je crois) en cas de fenêtre redimensionnée ...

Voilou !!
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />	
<title>TEST</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

#container {
	position: relative;
	margin: auto;
	width: 1000px;
	overflow: hidden; 
}
 

#top {
	margin: auto;
	width: 100%;
    height: 100px;
	background: red;
}

#middle{
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: auto;
	background: yellow;

}

#leftmenu {  
	float: left;
	width: 150px;
	background: yellow;

}

#bottom {
	position: absolute;
	height: 50px;
	bottom:0;
	width: 100%;
	background: green;
	text-align:center;
	clear: both;
}

#main {
	margin-left: 155px;
}

</style>

</head>

<body>
<?php
if (isset($_GET['largeur']) AND isset($_GET['hauteur'])) {
  // Affichage des variables
  $largeur_ecran = $_GET['largeur'];
  $hauteur_ecran = $_GET['hauteur'];

  $hauteur_bloc = $hauteur_ecran-100; 
  

} else {
  // passage des variables de dimensions du java script au php par $_GET
; 


  echo "<script type=\"text/javascript\">\n";

echo "if (document.body) {
var larg = (document.body.clientWidth);
var haut = (document.body.clientHeight);
} else {                                                
var larg = (window.innerWidth);
var haut = (window.innerHeight);
}";   

  echo "  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
            . "&largeur=\" + larg + \"&hauteur=\" + haut;\n";

  echo "</script>\n";
  exit();
}
?>
<div id="container">
	<div id="top">
	TOP
	</div>
	<div id="middle">	
		<div id="leftmenu" style=" height: <?php echo $hauteur_bloc;?>px;">
			leftmenu
		</div>
		<div id="main">

			main

		</div>
		<div id="bottom">
	BOTTOM
		</div>	
	</div>
</div>

</body></html>
Je crois que j'ai plus ou moins un problème avec le height:100% d'un menu, alors je post à la suite de ce message.

Voici ma page http://www.gromiz.com/Test/Test/test.html

Schématiquement elle se decompose avec les div suivant:


<div id='content'>
    qui centre le contenu au milieu la page.

    <div id='banniere'>
         banniere du site en haut de la page.
    </div>

    <div id='menu_top'>
         un menu horizontale juste en dessous de la banniere
    </div>

    <div id='menu'>
        [b]le menu qui pose probleme! qui se trouve sur la gauche.[/b]
    </div>

    <div id='data'>
        à droite du menu
    </div>

    <div id='pieds'>
        un pieds de page.
    </div>
    fini.
</div>


J'aimerais que le menu de droite prene 100% de l'espace disponible c'est à dire qu'il s'adapte pour toujours faire la liaison entre le #menu_top et le #pieds.

Mon fichier Css se trouve ici: http://www.gromiz.com/Test/Css/exo.css

Merci d'avance de votre aide.
Bonjour,

Comme il me semblait que ta page devait rester en height 100% et à temps perdu, j'avais préparé ce bout de code, c'est un peu limite à cause de l'ascenseur vertical pas entièrement visible ... M'enfin c'est comparible ie 5.5+ et FF... Attention ceux qui n'aiment pas le positionnement absolute s'abstenir Smiley biggol 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />

<style type="text/css">	
*{padding: 0; margin: 0;}  

html body{
height: 100%;
}

#banniere
{
position: absolute;
top: 0;
height:150px;
width: 700px;
background: blue;
z-index: 100;
left: 50%;
margin-left: -350px;
}

#droite {	/* contient les deux blocs à positionner */
width: 550px;
position: absolute;
overflow: auto;	  
background: yellow;
top: 0; 
left: 50%; 
margin-left: -200px;
z-index: 10;
height: 100%;
}
	
html>body #droite {
min-height: 100%;
max-height: 100%;
}

#droite  p{
margin: 0 15px 0 15px
}
   
#droite  p.premier{
margin-top: 250px;
}

#droite  p.dernier{
margin-bottom: 30px;
}
	
#gauche {	
width: 150px;
position: absolute;
height: 100%;
overflow: auto;	  
background: green;
left: 50%; 
top: 0;
margin-left: -350px;
z-index: 10;
}

html>body #gauche {
min-height: 100%;
}
	
li.lighter
{
background:#dfebcf;
text-align:left;
padding-left:2px;
}

li.darker
{
background:#d1e2ba;
text-align:left;
padding-left:2px;
}

#menu
{
width:150px;
z-index: 10;
padding-top: 0px;
}

#menu a
{
text-decoration:none;
color:black; 
}

#menu ul
{
margin-top:170px;
padding:0px;
list-style-type:none;
height:auto;
}

#menu_top
{
position: absolute;
top: 150px;
background: #3ac4d7;
height: 20px;
width:700px;
z-index: 100;
text-align:right;
left: 50%;
margin-left: -350px;
}

#menu_top ul
{
widht:700px;
text-align:right;
}

#menu_top li, #menu_top ul
{
display: inline;
margin:0;
padding:0;
height:5px;
list-style-type: none;
}

#menu_top li a 
{ 
color: white;
font: 17px;
text-decoration: none;
border-left: 1px solid #fff;
padding-left:10px;
padding-right:10px;
text-align: right;
}  

#pieds
{
width:700px;
background:#3ac4d7;
text-align:center;
left: 50%;
margin-left: -350px;
bottom:0;
position:absolute;
z-index: 100;
}

#pieds a
{
color:white;
font:12px;
}

</style></head>
<body>
	<div id="banniere">
    </div>
    <div id="menu_top">
        <ul>
            <li>
                <a href="">Top</a>
            </li>
            <li>
                <a href="">Top</a>
            </li>
            <li>
                <a href="">Top</a>
            </li>
        </ul>
    </div>


	<div id="gauche">
		<div id="menu">			        
			<ul>
				<li class="lighter">
					<a href="">Menu1</a>
				</li>
				<li class="darker">
					<a href="">Menu2</a>
				</li>
				<li class="lighter">
					<a href="">Menu3</a>
				</li>
				<li class="darker">
					<a href="">Menu4</a>
				</li>
			</ul>	   
		</div>
		 
	</div>		 
					 
	<div id="droite">			
		<p class="premier">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque et massa a leo pellentesque lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec non tortor vel lacus tristique aliquam. Donec lorem. Suspendisse potenti. Mauris lectus massa, pharetra vitae, mollis mattis, blandit eget, tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed tempor eros in felis. Aenean cursus libero quis purus. Nullam et leo sed dolor placerat commodo. Sed eu metus. Duis pede lorem, porttitor vel, dictum non, bibendum eleifend, lorem. Etiam fermentum tellus ut sem. Quisque luctus interdum odio. Morbi dapibus. Fusce facilisis fermentum erat. Nunc viverra condimentum metus.
		</p> 
				
		<p>
		 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque et massa a leo pellentesque lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec non tortor vel lacus tristique aliquam. Donec lorem. Suspendisse potenti. Mauris lectus massa, pharetra vitae, mollis mattis, blandit eget, tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed tempor eros in felis. Aenean cursus libero quis purus. Nullam et leo sed dolor placerat commodo. Sed eu metus. Duis pede lorem, porttitor vel, dictum non, bibendum eleifend, lorem. Etiam fermentum tellus ut sem. Quisque luctus interdum odio. Morbi dapibus. Fusce facilisis fermentum erat. Nunc viverra condimentum metus.
		</p>
				
		<p class="dernier">
		 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque et massa a leo pellentesque lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec non tortor vel lacus tristique aliquam. Donec lorem. Suspendisse potenti. Mauris lectus massa, pharetra vitae, mollis mattis, blandit eget, tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed tempor eros in felis. Aenean cursus libero quis purus. Nullam et leo sed dolor placerat commodo. Sed eu metus. Duis pede lorem, porttitor vel, dictum non, bibendum eleifend, lorem. Etiam fermentum tellus ut sem. Quisque luctus interdum odio. Morbi dapibus. Fusce facilisis fermentum erat. Nunc viverra condimentum metus.
		</p>
	</div>
						 
    <div id="pieds">
        <a href="" /> Guillaume Grossetie © 2006-2007 
    </div>


</body>
</html>
Tout d'abord je tenais à remercier Ghost pour son code, puisque, ayant le même problème que nierdz, il a été pour moi une très bonne base de travail.
Cependant, je me suis permis de le modifier légèrement car il y avait des bugs sous Firefox et il ne répondait aux normes W3C.
Chez moi il a fallut absolument mettre le doctype en premier car sinon ça ne fonctionnait pas correctement et, de plus, ce n'est pas validé par le W3C.
Modifié par djeeks (08 Jan 2007 - 02:08)
Un léger problème résidait dans l'inclusion du javascript dans le php, ne l'empêchant pas de fonctionner mais le rendant non valide. Je précise donc la petite modification que j'ai apporté (juste le code de la partie en question):
echo "<script language='Javascript'>";
echo "<!--\n";
echo "if (document.body) {
var larg = (document.body.clientWidth);
var haut = (document.body.clientHeight);
} else {                                                
var larg = (window.innerWidth);
var haut = (window.innerHeight);
}";   
echo "  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
            . "&largeur=\" + larg + \"&hauteur=\" + haut;\n";
echo "// -->";
echo "</script>\n";


au lieu de:

 echo "<script type=\"text/javascript\">\n";



echo "if (document.body) {

var larg = (document.body.clientWidth);

var haut = (document.body.clientHeight);

} else {                                                

var larg = (window.innerWidth);

var haut = (window.innerHeight);

}";   



  echo "  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"

            . "&largeur=\" + larg + \"&hauteur=\" + haut;\n";



  echo "</script>\n";

  exit(); [b]//Ligne à retirer aussi [/b]


Encore merci à Ghost pour son travail. J'espère que cette modification ne te dérange pas et préviens moi si cela change au moins en partie les fonctionnalités de ton code.
Modifié par djeeks (08 Jan 2007 - 02:20)
Sujet clos
Aller à