Largeur 100% et scrollbars.

**Sergejack** · 29/04/2009, 17h26

Bonjour,

j'ai un petit soucis de mise en page auquel je ne vois, hélas, pas encore de solution.
J'ai un tableau dont j'aimerais que la largeur prenne tout l'espace navigateur disponible (donc, je lui met ainsi qu'à BODY, width : 100%).
Ce tableau est assez long et cause donc l'apparition d'une scrollbar verticale.
Jusque là pas de problème.

Mais, comme la scrollbar vertical fait, elle-même une certaine largeur, avec le tableau "100%", l'espace horizontale occupé dépasse l'espace disponible (genre 100% + 20pixels) et fait apparaître une seconde scrollbar (horizontale, elle).

Comment l'éviter ?

**Macmillenium** · 29/04/2009, 17h41

Bonjour,

Envoyé par Sergejack

(donc, je lui met ainsi qu'à BODY, width : 100%).

Les feuilles de styles par défaut (celle de Firefox en tous cas) appliquent une marge de 8px sur le body. Sans faire de reset et si tu renseignes un width:100% la largeur finale est
8px+100%+8px, donc dépasse celle du viewport ...

**Sergejack** · 04/05/2009, 09h49

La seule solution consiste alors à mettre un margin horizontal de 0px sur le body ?

**desert** · 04/05/2009, 13h07

Bonjour,

Envoyé par Sergejack

La seule solution consiste alors à mettre un margin horizontal de 0px sur le body ?

D'après ce que tu as expliqué, oui.
Par contre, le scrollbar vertical est compris dans la largeur de ton tableau, elle est donc plutôt calculée de cette façon: 100% - 20px.

**devyan** · 07/05/2009, 14h36

Il me semble que tu peux "tricher" de la façon suivante...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
...
<body style="margin:20px;">
	<div style="display:block;margin:0;padding:0;">
<!-- Du fait du display block (facultatif car c'est la valeur par défaut) 
	le div prend automatiquement toute la largeur "interne" de 
	son parent (ici body) -->
		<table style="width:100%;height:100%;overflow:auto;">
			...
		</table>
	</div>
</body>
...

**Sergejack** · 08/05/2009, 09h23

J'en reste à ce qu'en disait Macmillenium. J'essaierai ta méthode, devyan, à l'occasion.

Merci.

Largeur 100% et scrollbars.

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager