Enlever une valeur en pixels à un %

Fermé
Silver - 31 mars 2009 à 15:01
 Silver - 3 avril 2009 à 09:22
Bonjour,

Voilà mon problème : je souhaiterais avoir une page qui prenne toute la hauteur de l'écran de l'utilisateur, mais avec une entête et un pied de page d'une valeur en pixels fixe. C'est donc la partie centrale, contenant le contenu qui devrait varier.

L'idéal serait de mettre une dimension au div du contenu de 100% -xx px, mais bien sûr ça marche pas >_<

****************************************************************************

Mon code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="style2.css" />
<TITLE>Blabla</TITLE>
</HEAD>
<BODY>
<div id="Haut"></div>
<div id="Milieu">

<div id="p">Haec subinde Constantius audiens et quaedam referente Thalassio doctus, quem eum odisse iam conpererat lege communi, scribens ad Caesarem blandius adiumenta paulatim illi subtraxit, sollicitari se simulans ne, uti est militare otium fere tumultuosum, in eius perniciem conspiraret, solisque scholis iussit esse contentum palatinis et protectorum cum Scutariis et Gentilibus, et mandabat Domitiano, ex comite largitionum, praefecto ut cum in Syriam venerit, Gallum, quem crebro acciverat, ad Italiam properare blande hortaretur et verecunde.</div>

<div id="p">Iam in altera philosophiae parte. quae est quaerendi ac disserendi, quae logikh dicitur, iste vester plane, ut mihi quidem videtur, inermis ac nudus est. tollit definitiones, nihil de dividendo ac partiendo docet, non quo modo efficiatur concludaturque ratio tradit, non qua via captiosa solvantur ambigua distinguantur ostendit; iudicia rerum in sensibus ponit, quibus si semel aliquid falsi pro vero probatum sit, sublatum esse omne iudicium veri et falsi putat.</div>

<div id="p">Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem oppressi. praediximus enim Montium sub ipso vivendi termino his vocabulis appellatos fabricarum culpasse tribunos ut adminicula futurae molitioni pollicitos.</div>

<div id="p">Haec subinde Constantius audiens et quaedam referente Thalassio doctus, quem eum odisse iam conpererat lege communi, scribens ad Caesarem blandius adiumenta paulatim illi subtraxit, sollicitari se simulans ne, uti est militare otium fere tumultuosum, in eius perniciem conspiraret, solisque scholis iussit esse contentum palatinis et protectorum cum Scutariis et Gentilibus, et mandabat Domitiano, ex comite largitionum, praefecto ut cum in Syriam venerit, Gallum, quem crebro acciverat, ad Italiam properare blande hortaretur et verecunde.</div>

<div id="p">Iam in altera philosophiae parte. quae est quaerendi ac disserendi, quae logikh dicitur, iste vester plane, ut mihi quidem videtur, inermis ac nudus est. tollit definitiones, nihil de dividendo ac partiendo docet, non quo modo efficiatur concludaturque ratio tradit, non qua via captiosa solvantur ambigua distinguantur ostendit; iudicia rerum in sensibus ponit, quibus si semel aliquid falsi pro vero probatum sit, sublatum esse omne iudicium veri et falsi putat.</div>

<div id="p">Fin du texte</div>

</div>
<div id="Bas"></div>
</BODY>
</HTML>

****************************************************************************
Et la feuille de style :


#Haut
{
background-color:red;
height:50px;
width:100%;
}

#Milieu
{
background-color:blue;
height:100%;
width:100%;

position:fixed;
overflow:auto;
}

#Bas
{
background-color:green;
height:100px;
width:100%;

position:fixed;
bottom:0px;
}

****************************************************************************
Si je met plus de texte que la taille du cadre du milieu, le texte déborde et est caché par le div du dessous.

Vous auriez une idée ?

Merci

4 réponses

bissdebrazza Messages postés 2065 Date d'inscription vendredi 29 juin 2007 Statut Contributeur Dernière intervention 7 décembre 2017 712
31 mars 2009 à 15:30
Regarde un peu ce que j'avais fait:
#Header {
	position:absolute;
	left:0.2%;
	top:1%;
	width:99.3%;
	height:9%;
	z-index:1;
	border:#0000FF 0px solid;
	background-color:#FFFFFF;
	
}
#Gauche {
	position:absolute;
	left:0.2%;
	top:11%;
	width:14%;
	height:85%;
	z-index:2;
	border:#0000FF 0px solid;
	background-color:#FFFFFF;
}
#Centre {
	position:absolute;
	left:14.7%;
	top:11%;
	width:84.7%;
	height:85%;
	z-index:3;
	border:#0000FF 0px solid;
	background-color:#FFFFFF;
        overflow:auto;
}
#Footer {
	position:absolute;
	left:0.2%;
	top:96.7%;
	width:99.3%;
	height:2.6%;
	z-index:4;
	border:#0000FF 0px solid;
	background-color:#FFFFFF;
	font-weight:bold;
}
1
bissdebrazza Messages postés 2065 Date d'inscription vendredi 29 juin 2007 Statut Contributeur Dernière intervention 7 décembre 2017 712
31 mars 2009 à 15:13
Salut!
je te conseille de tout mettre en % comme ça tu n'auras pas de problème avec les résolutions d'écran des pc.moi j'ai fais la meme chose que toi,mais tout en % si je me souviens!
Cdt
0
J'ai pensé à tout mettre en % effectivement mais ça ne donne pas vraiment le résultat que je recherche.
Si il n'y a pas d'autres solutions je ferais comme ça mais ça m'embête un peu quand même ^^
0
bissdebrazza Messages postés 2065 Date d'inscription vendredi 29 juin 2007 Statut Contributeur Dernière intervention 7 décembre 2017 712
31 mars 2009 à 15:24
tu veux pas que ton texte déborde du centre c'est ça?
0
Voilà c'est ça, parce que là quand je descend la barre de scroll au maximum, il reste une partie du texte qui est de la taille des deux autres div (vu que le milieu est sensé faire 100%), qui reste cachée par le div du bas. Le bas de la barre de scroll en elle-meme est aussi cachée.
0
Hello

Je remonte le topic car je n'ai toujours pas trouvé de solutions.
Je ne peux pas utiliser de pourcentage pour l'entête et le bas de page car sinon, en réduisant la fenêtre, le texte finit par déborder et créer des problèmes de mise en page (ce sont des menus comprenant juste une ligne de texte).

Donc si vous avez une idée je vous serais infiniment reconnaissant :)

Merci d'avance
0