28172 sujets

CSS et mise en forme, CSS3

Plein page avec entete, corp et pied de page

Bonjour à tous, j'essaye de trouver depuis quelque temps le moyen de faire

un header de hauteur 100 pixel largeur 100%
un corps de largeur 100% et d'une hauteur variable automatiquement (le reste de la place de la page)
un pied de page de 30 pixel de hauteur et de largeur de 100%

et qu'importe la résolution d'écran me header et le footer doive rester fixe et seul la taille du corps peux se modifier. en sachant que dans le corps si le contenue se trouve plus grand en hauteur que la hauteur du corps proposer par la résolution de la page, qu'apparaisse un scroll sur le sorp et non sur toute la page.

Si c'est un peu chinois n'hésiter pas à me le signaler. MErci d'avance
Bonsoir,

Ce que tu veut faire ressemble a du frame (il existe un doctype valide , autant en html que xhtml ) difficile ensuite de monter un site avec ça qui réponde un minimum au critères de qualités et 'mode' actuelles ...

Via css , tu peut te baser sur le positionnement fixed et degager des marges internes pour empêcher les contenu de se trouver cacher sous le header et footer . LE défaut du positionnement fixed est qu'il n'autorise pas l'élément a être plus long ou plus large que la fenêtre du navigateur , il ya risque de voir les contenus de header et footer disparaitre ou déborder .

Autre piste le positionnement relatif + absolu + toujours des marges de dégagement et éventuellement un min-width et min-height sur body pour ne pas trop compresser la page sur un ecran de pc.

Dans les deux cas , le scroll si il y a , occupera la hauteur de l'écran.

tu peut aussi ne placer que le header en absolue pour qu'il reste en haut de l'écran , monter une page a 100% de hauteur minimale et rejeter le pied en bas en le laissant descendre si ton contenu est important. Un montage de ce genre en css est faisable et est plutôt stable.
Une telle base peut t'assurer un affichage acceptable .

Avec une couche de JavaScript , tu peut sur cette base recalculer les hauteurs ecran , contenus et réappliquer les styles de hauteur et positionnement de chacun au chargement et redimensionnement de la page pour obtenir le résultat recherché et avoir un resultat correct et stable.

Les styles ne permettent pas de simuler entièrement le comportement des frames (positionement des barre de défilement).

GC
Merci pour ces informations, aurait tu un exemple de base sur lequel je pourrais m'appuyer (je veux parler du code source d'une page)

Car l'iframe est déconseillé dans mon cas donc je dois travailler en div et en css

en résumer je pense que ça devrai donner ceci

<div id="pageentiere">
<div id="header fixe en haut hauteur 80 et largeur 100%">
</div>
<div id="corps fixe au centre hauteur (le reste) et largeur 100%">
</div>
<div id="footer fixe en bas hauteur 30 et largeur 100%">
</div>
</div>

Pour le css je seche un peu.

Merci d'avance
Tu peux jeter un œil à mon site/CV (le lien est situé en bas de mon post, bouton www), sa construction est identique à celle que tu souhaite, mis à part les dimensions qui diffèrent.

Je te copie ici les bouts de code qui t'intéressent :
<html>
  <body>
    <header id="header"></header>
    <div class="wrapper"></div>
    <footer id="footer" role="contentinfo"></footer>
  </body>
</html>


html{
	height: 100%;
	margin: 0;
	padding: 0;
}
body{
	height: 100%;
	margin: 0;
	padding: 0;
	width: 100%;
}
#footer{
	bottom: 0;
	height: 26%;
	max-height: 260px;
}
#footer,
#header{
	left: 0;
	position: fixed;
	width: 100%;
	z-index: 10;
}

Modifié par octopus984 (01 Jun 2010 - 22:10)
Sujet clos
Aller à