28172 sujets

CSS et mise en forme, CSS3

IE(7) pas d'ascenseur

Bonjour,

Je souhaiterai mettre en place la structure suivante

header : taille fixe 106px toujours visible en haut;
footer : taille fixe 39px toujours visible en bas;
le reste ("centre") doit utiliser 100% de l'espace restant et il doit être possible de faire défiler ce contenu via les ascenseur si besoin.

ma page est structurée ainsi
<body>
<form>
<div id="header" />
<div id="centre" />
<div id="footer" />
</form>
</body>

La présence du form n'est pas négociable.
J'aimerai que la partie centrale affiche un ascenseur uniquement lorsque cela est nécessaire.
Le code suivant est ok pour FF.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>

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

 form{
 margin:0;
 padding:0;
 top:0;
 left:0;
 right:0;
 bottom:0;
 overflow:auto;
 }

 div#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:106px;
  z-index:3;
  background-color:blue;
  overflow:hidden;
 }
 div#footer{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:39px;
  z-index:2;
  background-color:red;
  overflow:hidden;
 }


 div#centre{
  position:absolute;
  top:106px;
  left:0px;
  bottom:39px;
  width:100%;
  z-index:1;
  background-color:white;
 }

 
</style>	
</head>
<body style="background-color:#fff;">
<form>
  
    <div id="header">
entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>entete<br/>
    </div>

<div id="centre">
centre<br/>centre<br/>centre<br/>centre<br/>
centre<br/>centre<br/>centre<br/>centre<br/>
centre<br/>centre<br/>centre<br/>centre<br/>

</div>

<div id="footer">
footer<br/>footer<br/>footer<br/>footer<br/>footer<br/>
</div>

</form>
   
</body>
</html>
Bonjour,

Je vois pas trop ce que fixed va changer à l'affaire.
Si mon élément de plus bas niveau (form) est ancré à gauche, à droite, en haut et en bas ; alors les fils en absolute sont équivalents à des fixed, non ?

Je ne vois pas pourquoi IE ne rajoute pas une scrollbar lorsque le contenu central est partiellement masqué.
En remplaçant l'overflow:hidden sur le body par un overflow:auto, j'ai bien une scrollbar mais qui prend toute la window au lieu de juste apparaitre au niveau de la div centrale (comme dans FF)

Vincent.
Sujet clos
Aller à