Une solution pour le layout proposé en image ? [Résolu]

[nilsb13]

Bonjour,
je cherche une solution CSS, table ou div pour le layout suivant :



- Aucune taille de chacune des zones ne peut être connue.
- Les zones augmentent en taille en fonction de leur contenu (une ligne ou plus de boutons / champs formulaire).

/!\ Par contre, la dernière zone, tout en bas, qui contient les résultats à afficher, peut-être très grande.
- Elle ne doit pas faire allumer l'ascenseur du navigateur !
- Mais doit faire allumer seulement son propre ascenseur.
- Elle doit seulement occuper l'espace resté libre en dessous des 4 premières zones.
- Elle ne doit pas s'étendre au delà du bas de la fenêtre.

traduction du texte de l'image :

browser window
=> fenêtre du navigateur

one or more lines height : unknowable depend on content not fixed
=> une ou plusieurs lignes hauteur "inconnaissable" dépend du contenu non fixe

buttons for add / search form
=> boutons pour le formulaire d'ajout / recherche

add / search form
=> formulaire d'ajout / recherche

buttons for result / modify form
=> boutons pour le formulaire de résultat / modification

result / modify form
=> formulaire de résultat / modification

scroll bar
=> ascensseur

(je sais bien que vous parler tous l'informatique et donc l'anglais, mais c'est un site français, alors, j'ai traduis pour d'autres ...)


J'ai cherché longtemps sur le net sans trouver de réponse, Google n'a pas été mon ami sur ce coup là !

(lien pour la même question dans javascript => http://www.developpez.net/forums/d11...e/#post6184834)

Mille merci pour votre aide !
Nils.

[Bovino]

Je suis pas certain de saisir la complexité de ta demande

Il suffit juste d'empiler les div non ?

Code html :

1
2
3
4
5
<div id="menu"></div>
<div id="boutons"></div>
<div id="recherche"></div>
<div id="btn_results"></div>
<div id="resultats"></div>

avec par exemple dans le CSS

Code :

1
2
3
#resultats{
    overflow: scroll;
}

[nilsb13]

je veux bien essayer, mais je crains que non,

tout d'abord, j'ai vu qu'il fallait positionner :

Code :

1
2
3
4
5
6
7
8
9
html {
height				: 100%;
}
 
body {
height				: 100%;
margin: 0;
padding: 0;
}

et malgré cette configuration,

avec ton code, ou un code similaire,
la dernière div n'allume pas son ascenseur, mais celui du navigateur.

[nilsb13]

Bien,

finalement la solution a été trouvée du côté javascript !

=> http://www.developpez.net/forums/d11...cran-proposee/

Merci à tous !