Discussion :

[krunch]

Bonjour

J'ai une div 'container' dont le contenu est zappé dynamiquement par un menu, c'est à dire que plutôt que de recharger la page je contrôle en javascript le display (block/none) des divs 'content0'/'content1' imbriquées dans la div 'container'.

Cette div est bêtement centrée :

Code :

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

1
2
3
4
#container {
	margin: 0 auto;
	width: 800px;
}

Le problème est juste que 'content0' déborde en hauteur alors que généralement 'content1' ne déborde pas, et quand la barre de défilement est ajoutée, l'ensemble de la page est décalé vers la gauche ...

Je suppose qu'il y a un moyen de régler ça avec les css sans ajouter du js ?

J'ai essayé en position absolute mais c'est la même chose

Code :

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

1
2
3
4
5
6
#container {
	left: 50%;
	margin-left: -400px;
	width: 800px;
	position: absolute;
}

Et en fixed le scroll n'est pas affiché ... Comment feriez vous ça ?

[Bovino]

Non, il n'y a pas de moyen en CSS.
Les techniques de centrage horizontal permettent de centrer par rapport à la partie de la page affichant le contenu et la barre de scroll n'en fait pas partie.

Quant à vouloir régler ça en JavaScript, bon courage, la taille de la barre de scroll n'étant pas du tout uniformisée en fonction des navigateurs !

La question la plus importante, c'est surtout : est-ce si gênant que ça ?

[krunch]

Zut ... C'est vrai que faire de la détection de navigateur pour régler la taille du décalage .. ça devient un peu lourdingue.

La question la plus importante, c'est surtout : est-ce si gênant que ça ?

Aujourd'hui ça me gène un peu, mais peut-être est ce un excès de chipotage ... je verrai demain.

Merci bien !

[Invité]

Bonjour,
une solution :

Code css :

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

overflow-y:scroll;

De sorte que la barre verticale de scroll soit toujours affichée.

[krunch]

Si jamais ça intéresse quelqu'un j'ai trouvé une solution simple en js, il suffit d'utiliser window.innerWidth, et de contrôler le resize. Ici la div 'container' contient toute la page :

Code :

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

1
2
3
4
5
6
7
8
9
10
function centerdiv () {
	document.getElementById('container').style.left = (window.innerWidth - 800) / 2 + 'px';
}
window.addEventListener( 'resize', centerdiv, false );
 
function zap(content) {
	...
	centerdiv();
}
zap(1);

Centrage css supprimé, juste la width correspondante :

Code :

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

1
2
3
4
#container {
	width: 800px;
	position: absolute;
}

Ça a l'air de marcher (dans 5 navigateurs dernières versions, et pas IE8 apparemment) et c'est quand même mieux.

Ou effectivement toujours afficher la barre de défilement, merci.

[NoSmoking]

Bonjour,

Ou effectivement toujours afficher la barre de défilement, merci.

C'est à mon sens la solution la plus pérenne et la moins surprenante, j'entends par là quelle ne te péteras pas à la figure le jour où un internaute aura décidé de grossir les dimensions de son environnement, paramètres avancés-> barre de défilement ou autres d'ailleurs.

[CCyrillus]

il ya aussi le

Code :

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

html {min-height:100.01%;}