taille du contenu d'un div qui s'adapte à la taille du div

**Mat_DZ** · 30/10/2008, 17h18

Bonjour à tous,

je voudrai que la taille du contenu de mon div (des tables en l'occurence) diminue automatiquement plutôt que d'avoir la scroll barre horizontale qui apparaisse en bas de mon div .

Sous firefox cela se fait tout seul mais pas sous ie

Pour exemple dans mon div,un tableau avec un width de 100% augmente systématiquement la largeur du div

Merci!

**franculo_caoulene** · 30/10/2008, 17h50

Salut,

j'ai rien compris. Pourrais-tu nous fournir un exemple suivant les instructions de ce message?

**juliend2** · 30/10/2008, 18h26

Si tout ce que tu veux c'est que le scrollbar horizontal disparaisse, applique ceci a ton body :

Code :

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

1
2
3
body {
overflow-x: hidden;
}

(appliquer ceci a l'aide d'un commentaire conditionnel pour ta version de IE qui est louche)

Mais si non, on aimerais avoir plus de détails sur ton problème pour mieux t'aider!

**Mat_DZ** · 30/10/2008, 18h28

ok, je récapépète...

j'ai un div, dans ce div j'ai un tableau.

mon tableau et mon div ont un width de 100%

problème : le tableau prend une largeure superieure à celle du div, du coup j'ai un scrollbar horizontal qui me permet de voir mon tableau intégralement.
Mais moi je ne veu pas de scrollbar, je veux que la largeur de mon tableau s'adapte à celle du div.

Par contre désolé, je n'arrive pas à le reproduire dans un exemple simple.

En espérant être un peu plus clair...

Envoyé par juliend2

body {
overflow-x: hidden;
}

déjà tenté, c'est pas bon car du coup mon tableau est coupé sur la droite...

J'essaye de vous trouver un exemple demain...

Merci et bonne soirée

**Mat_DZ** · 31/10/2008, 11h03

Bon, voilà un exemple fonctionnel :

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>    
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<STYLE type="text/css">
<!--
 
/*--------  entete ---------*/
 
#header {
  width: 100%;
}
 
#menu {
  padding-right: 10px;
  padding-bottom: 10px;
  width: [% font_size * 17 + 5 %]px;
}
 
#display_menu {
 
  border-right: 1px;
  border-left: 1px;
  width: 18px;
  height: 100%;
}
 
#div_content {
  width:100%;
  overflow:auto;
  height: 100%;
}
 
#fixed_menu {
  border: 0px;
  overflow:hidden;
}
 
#content {
  padding-right: 10px;
  padding-top: 10px;
  padding-left: 10px;
}
 
#structure {
  text-align: left;
  width: 100%;  
  height: 100%;  
  padding: 0px;
  margin: 0px;
}
 
#menu_and_content {
  width: 100%;  
  height: 100%;  
}
-->
</STYLE>
 
<title>test</title>
 
</head>
<body id='body' scroll='no'>
<div name='main_content' id='main_content'>
 
<script type="text/javascript">
 
function findPosY(obj) {
  var curtop = 0;
  if (obj.offsetParent) {
    while (obj.offsetParent){
        curtop += obj.offsetTop
        obj = obj.offsetParent;
    }
  }else if (obj.y) {
   curtop += obj.y;
  }
  return curtop;
}
 
function window_height() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return myHeight;
}
 
function resize_page2() {
 
var content_height=window_height()-findPosY(document.getElementById("div_content"))-45;
  if (document.getElementById("div_content").scrollHeight > content_height) {
    content_height=content_height-2;    
 }
 
  document.getElementById("content").style.vertical_align="top";
  var div_content_height=content_height-5;
  document.getElementById("div_content").style.height=div_content_height+"px";
 
  document.getElementById("menu_and_content").style.height=content_height; 
  document.getElementById("fixed_menu").style.height=content_height+"px";  
 
 
  var  tmp_content_height=content_height-5;
  document.getElementById("display_menu_icons").style.height=tmp_content_height+"px";
 
}
 
</script>
 
<table id="structure">
<!--Line Header-->
  <tr>
   <td id="header">
    <table class="header">
    <tr>
      <td>
 	HEADER
      </td>
    </tr>
    </table>
    </td>
  </tr>
<!--Line Menu & Content-->
  <tr>
  <td width="100%" style="vertical-align: top;">
  <div id="menu_and_content">
  <table width="100%" valign="top">
    <tr>
    	<td id="menu" valign="top">
    		<div>
        	MENU 
    		</div>
    	</td>
    	<!--Column Content-->
    	<td id="content" valign="top" >
    	<div id="div_content" valign="top" style="width:100%"><a name="top"></a>			
 
	<textarea id='test' name='test' style="width:100%;height:450px;">test</textarea>
	<br/>
	<table width=100% style="border:1px solid black"><tr><td>test</td></tr></table>
	ligne test 1 <br/>
	ligne test 2 <br/>
	ligne test 3 <br/>
	ligne test 4 <br/>
	ligne test 5 <br/>
	ligne test 6 <br/>
	ligne test 7 <br/>
	ligne test 8 <br/>
	ligne test 9 <br/>
	ligne test 10 <br/>
	ligne test 11 <br/>
	ligne test 12 <br/>
	ligne test 13 <br/>
	ligne test 14 <br/>
	ligne test 15 <br/>
	ligne test 16 <br/>
	ligne test 17 <br/>
	ligne test 18 <br/>
	ligne test 19 <br/>
	ligne test 20 <br/>
 
     	</div>
    </td>
   </tr>
  </table>
  </div>
  </td>
 </tr>
<!--Line Footer-->
 <tr>
   <td>FOOTER</td>
 </tr>
</table>
</div>
 
<script language="JavaScript">
	resize_page2();
	document.body.scroll="no";
	window.onresize=resize_page;
</script>
</body>
</html>

donc ma question : pourquoi j'ai cette barre de défilement horizontal sous mon div? Mon tableau et mon texte area sont pourtant vide !

En espérant être un peu plus clair

Merci

taille du contenu d'un div qui s'adapte à la taille du div

HTML

Discussions similaires

Partager

Partager