tableau 100% à 3 lignes dont deux de hauteurs fixes

**shushed** · 19/09/2007, 15h12

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** · 19/09/2007, 15h26

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** · 19/09/2007, 15h42

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** · 20/09/2007, 06h20

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** · 20/09/2007, 09h20

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** · 20/09/2007, 10h23

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 % ...

**shushed** · 20/09/2007, 10h30

Ahhh... ça je m'en doute que ça simplifierait les choses :-)

Oui, c'est impératif. Ces deux blocs contiennent des images aux dimensions fixes.

**Bisûnûrs** · 20/09/2007, 10h33

Je viens de faire ça qui fonctionne uniquement sur Firefox :

http://josselin.willette.free.fr/cod.../headfootfixe/

A adapter pour IE6.

Sinon, je suis de l'avis de GyZmoO.

**shushed** · 20/09/2007, 10h44

Ouip, je suis passé par là aussi.

2 problèmes:
- Les blocs du haut et du bas sont en position: fixed, non reconnu par ie < ie7
- La scrollbar prend toute la hauteur de la fenetre, au lieu de ne prendre que toute la hauteur du block central. Mais bon, ça je suppose qu'il y a moyen de règler le prob en remplaçant le padding du block central par un margin.

Bref, cette solution aurait été adéquate s'il n'y avait pas eu ie6 dans le jeu... as usal

. Là, on est proche de ce que je recherche... En fait, on y est, mais pas pour ie6. Et je ne peux pas exclure 50% des utilisateurs.

**Bisûnûrs** · 20/09/2007, 10h50

Utiliser le Javascript ne te dérange pas ? Parce que je ne pense pas qu'on puisse sans sortir sans :

1. si tu dois garder des valeurs fixes pour le header et le footer
2. si tu veux être totalement crossbrowser

**shushed** · 20/09/2007, 11h05

Non, pas vraiment. En fait le site propose un jeu complètement réalisé en AJAX, donc un peu plus ou peu moins de JS...

Mais j'aurais préféré ne pas utiliser JS pour ça, question de propreté

. Et si je me souviens bien, les simulations de position: fixed avec JS sont un peu bancales.

sinon, que pensez vous de ça pour ie6:
http://web.tampabay.rr.com/bmerkey/e...ion-fixed.html
?

**Bisûnûrs** · 20/09/2007, 11h10

Envoyé par shushed

Mais j'aurais préféré ne pas utiliser JS pour ça, question de propreté

Je comprends oui, mais des fois on n'a pas le choix. ^^

Envoyé par shushed

Et si je me souviens bien, les simulations de position: fixed avec JS sont un peu bancales.

Je ne pensais pas à une simulation de position:fixed, mais plutôt à mettre le footer et le header en position:absolute et calculer la taille du corps en fonction de la hauteur de la fenêtre.

Envoyé par shushed

sinon, que pensez vous de ça pour ie6:
http://web.tampabay.rr.com/bmerkey/e...ion-fixed.html
?

Ben c'est un peu ce que j'ai utilisé, mais je trouve ce genre de procédé assez limite, étant donné que les navigateurs ne réagiront pas la même manière.

**shushed** · 20/09/2007, 11h29

hummmm... ouip.

Sinon, je sais qu'on sort un peu du css, mais tu proposerai quoi en JS pour calculer la taille du bloc central? Tous les browsers proposent des menus de tailles et de positions différentes, ça risque pas d'être encore plus casse-tête?

**Bisûnûrs** · 20/09/2007, 11h50

Non non, y a juste 3 lignes de JS à mettre :

http://josselin.willette.free.fr/cod...xe/index2.html

**onirisme** · 20/09/2007, 11h52

c'est de la bidouille php + js
Je suis passé par l'url faut mieux enregistrer l'info dans une session...
Il faut également retiré le echo de test

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<html>
<head>
<script type="text/javascript">
function resolution() {
document.location="<?php echo $_SERVER['PHP_SELF']; ?>?width="+screen.width+"&height="+screen.availHeight;
}
// fin -->
</script>
<?php
if(!isset($_GET['width']) and !isset($_GET['height'])){
    echo '<body onload="resolution();">';
}else{
$hauteur= $_GET['height'] ;
$max_height = $hauteur - 400 ; //Valeur à modifier
echo $max_height ;
/*echo '<body>';
echo 'Votre résolution est ' . $_GET['width'] . ' * ' . $_GET['height'];*/
}
 
 
?>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
}
#contener{
    width :600px ;
    background-color ; #F5F5F5 ;
}
#haut{
    background-color : #CC3300;
    height : 75px;
}
#bas{
    background-color : #CC3300;
    height : 75px;
}
#contenu{
height:<?php echo $max_height ; ?>;
background-color: #FFFFFF;
overflow : auto ;
}
-->
</style>
</head>
<body>
    <div id="contener">
        <div id="haut">
            <h1>Haut</h1>
        </div>
        <div id="contenu">
TEXTE - TEXTE -TEXTE
</div>
        <div id="bas">
            <h1>Bas</h1>
        </div>
    </div>
 
 
</body>
</html>

Bon c'est de la bidouille

Résultat : ICI
Bon faut fignoler mais c'est peut-être une piste...

**onirisme** · 20/09/2007, 11h54

Bon je retire mon post

Je crois que ta solution est bien plus simple...

**shushed** · 20/09/2007, 13h28

Ahhhh génial

Un tout grand merci à vous deux!

Vive Javascript!

**shushed** · 20/09/2007, 14h37

Ah, j'ai crié victoire trop vite...

Tout va bien pour ie6,ie7,FF.
Par contre, Opéra fait des siennes. On dirait qu'il ne comprend pas le overflow, il vire automatiquement la barre de scroll. La fenetre s'agrandit pour englober tout le texte. Apparement, il ne laisse pas la fonction Javascript s'occuper de redimenssionner le block central...

Bizarre comme comportement. Si vous ne savez pas ce que c'est, ce n'est pas trop trop grave. Les utilisateurs d'opéra sont moins d'1% sur le net... Mais bon :-)

**Bisûnûrs** · 20/09/2007, 14h47

Je pense que tu dois faire un test sur le navigateur en JS.

Opera n'aime pas :

Code javascript :

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

document.documentElement.clientHeight

Tu dois le remplacer par :

Code javascript :

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

document.body.clientHeight

uniquement pour Opera.

**onirisme** · 20/09/2007, 14h48

overflow auto n'est à priori pas compris par opéra. (ou le contraire)

test avec overflow scroll mais ça va ajouter la barre de défilement horizontale.

tableau 100% à 3 lignes dont deux de hauteurs fixes

Dimensionnement en CSS

Discussions similaires

Partager

Partager