Discussion :

[shushed]

bonjour bonjour!

Voici mon problème, j'aimerai réaliser une mise en page de ce style-ci:

__________
|_________|
|_________|
|_________|

Sachant que:
- Le tout fait 100% de largeur et hauteur.
- La premier et dernier blocks font 75px de hauteur
- Le block central s'adapte pour remplir le reste des 100%.

De plus, j'aimerais que si le contenu, apparaissant dans le block central, est plus long que la hauteur de celui-ci, une barre de scroll s'affiche dans le bloc central (et non pas sur toute la hauteur de la page).

Je suis déjà passé par plusieurs faq, mais rien y fait, je ne trouve pas de solution, ni avec des <div>, ni avec des <table>.

Dernière précsion: j'aimerai que ceci fonctionne sous ie6,ie7,ff et opéra.

Merci de votre future aide!

[GyZmoO]

Salut !

Pour ce qui est de la barre de défilement tu peux faire un truc du style :

overflow: auto ou
overflow: scrollbar je sais plus la différence mais tu auras bien ta barre de défilement la ou tu le souhaites !

Bon courage.

[shushed]

overflow: auto;
ou
overflow: scroll;

Oui, mais le problème n'est pas vraiment là. Il se situe plutôt au niveau de la mise en forme...

[onirisme]

Regarde ce lien : ICI
Je sais pas si c'est exactement ça que tu veux...

Le code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="contener">
    <div id="haut">
        <p>Haut</p>
    </div>
    <div id="milieu">
        <p>Milieu </p>
        <p>TEXTE</p>
    </div>
    <div id="bas">
        <p>Bas</p>
    </div>
</div>

Le code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
#contener{
    width : 850px;
    background-color : #F5F5F5 ;
    margin : auto ;
}
#haut{
    height : 75px;
    background-color : #CC3300 ;
}
#milieu{
    height : 300px ;
    overflow : auto ;
    background-color : #FFFFFF ;
    text-align : justify ;
}
#bas{
    height : 75px;
    background-color : #CC3300 ;
}

La propriété overflow auto = gestion auto du scroll horizontal et vertical en fonction du contenu
La propriété overflow scroll = force les scroll - elles sont placées même sil il n'y en a pas besoin

[shushed]

Merci pour la proposition de code, en fait, c'est presque ça. Le problème, c'est le "presque"...

Ici, le "conteneur" ne fait pas 100% de la hauteur de la fenetre, et la taille de "milieu" est fixée.

Le design doit être fluide en hauteur, et les blocks supérieur et inférieur doivent coller les bords hauts et bas de la fenetre, et ce, quelque soit le contenu de "milieu" (et c'est là que je me heurte à un mur).

J'espère que j'me fais bien comprendre, ce n'est pas toujours évident

[GyZmoO]

Il faut impérativement que tes 2 blocs bas et haut fassent 75px de hauteur? Parce que ça simpliferait la chose si mettons, tu leurs donnais une hauteur en % ...