Largeur Content dynamique et sidebar fixe à droite
mickaelb91
Messages postés
13
Statut
Membre
-
Seezlu -
Seezlu -
Bonjour,
Je bloque sur la disposition de ma siebar sur mon site.
Voici la version simplifiée de mon schéma :
http://jsfiddle.net/Q8QmB/1/
Je voudrais que la partie Content de gauche prenne toute la largeur restante.
Cette largeur peut changer, puisque ma sidebar aura un min-width et max-width.
De plus, la sidebar sera caché sur certaine page.
Je suppose que javascript est inévitable ?
J'aimerai un peu d'aide sur le coup ;)
Merci !
Je bloque sur la disposition de ma siebar sur mon site.
Voici la version simplifiée de mon schéma :
http://jsfiddle.net/Q8QmB/1/
Je voudrais que la partie Content de gauche prenne toute la largeur restante.
Cette largeur peut changer, puisque ma sidebar aura un min-width et max-width.
De plus, la sidebar sera caché sur certaine page.
Je suppose que javascript est inévitable ?
J'aimerai un peu d'aide sur le coup ;)
Merci !
A voir également:
- Largeur Content dynamique et sidebar fixe à droite
- Tableau croisé dynamique - Guide
- Les textes ne doivent pas être en retrait à droite et à gauche - Guide
- Exemple tableau croisé dynamique télécharger - Télécharger - Tableur
- Barre droite clavier - Forum Windows
- Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport existant ✓ - Forum Excel
2 réponses
Hello, afin de faire des interfaces du genre j'utilise les position: en CSS
Après je pense qu'on pourrait jouer avec les media queries ou les min-width max-width pour répondre à tes attentes.
je ne pourrais te certifier à 100% que c'est la meilleure méthode (compatible avec tous les navigateurs, etc.. etc..) mais c'est la méthode que j'utilise.
Maintenant reste à savoir si c'était bien le sujet de ta question ^^'
A+
Seezlu
html{height: 100%; width: 100%;}
body{height: 100%; width: 100%; position: relative;}
div#all{ position:absolute; top:0; left:0; right:0; bottom:0; height:auto;width:auto;}
div#header{position:absolute;top:0;left:0;right:0;height:150px;width:auto;}
div#sidebar{position:absolute;top:150px;left:0;bottom:150px;width:150px;height:auto;}
div#content{position:absolute;top:150px;left:150px;bottom:150px;right:0;height:auto;width:auto;}
div#footer{position:absolute;left:0;bottom:0;right:0;height:150px;width:auto;}
Après je pense qu'on pourrait jouer avec les media queries ou les min-width max-width pour répondre à tes attentes.
je ne pourrais te certifier à 100% que c'est la meilleure méthode (compatible avec tous les navigateurs, etc.. etc..) mais c'est la méthode que j'utilise.
Maintenant reste à savoir si c'était bien le sujet de ta question ^^'
A+
Seezlu
html{}
body{width:100%;margin:auto;}
#header{display:inline-block;width:100%;background-color:red;}
#sidebar{float:left;width:150px;background-color:yellow;}
#content{position:absolute;left:150px;right:0;width:auto;display:inline-block;background-color:blue;}
#footer{clear:both;background-color:brown;}
http://jsfiddle.net/Q8QmB/3/
Mais moi il me faut une condition pour que la largeur de Content soit dynamique ;)
- http://jsfiddle.net/Q8QmB/9/
les tailles fixent ne sont peut être pas adapté à jsfiddle mais disons que l'idée est là.
Après tu peux placer des min-width/height max-width/height à ta guise.