Discussion :

[tvirus0]

salut a tous
j'ai un problème qui a bruler mes neurones .
j'ai une div qui englobe deux autre div une pour le menu, et l'autre pour le contenu; la div contenu change hauteur (le contenu est variable), quand l' hauteur dépasse le min-height l'autre div de menu ne change pas
je voulais avoir la même hauteur quand la div content change

code css :

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
.page
{
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	top: 12px; 
	position: relative;
	width: 750px;
	min-height:500px;
	height: auto;
	left: 0px;
}
#sidebar 
{    	 
	color:White;
	background-color:#306121;
	float: left;
	width: 230px;
	height: auto;
	min-height:500px;
	border : 2px ridge black ;
	left:2px;
	overflow:auto;
}
#content 
{	overflow:auto;
	margin-left: 215px;
	border : 2px solid green;
	width:auto;
	min-height:500px;
	height:auto;
 
		}

code asp :

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
<div class="page">
 
             <!-- Zone : Zone de navigation à gauche de la page  -->
<div id="sidebar">                  
           		        <div id="liensEspaceMembre">  bienveune    
                               <asp:Literal ID="util" runat="server" Text="lool"></asp:Literal>
                              <br /> <font style=" font-size:xx-small"  >Nous sommes le <asp:Literal runat="server" ID="temps" ></asp:Literal> </font>
           		              </div>
                        <hr />
	                    <h1>   Menu</h1>
    	                <h2>
                            <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" 
                                ShowLines="True">
                            </asp:TreeView>
                            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" SiteMapProvider="admin"/>
                        </h2>
 </div>
<div id="content">
                            <asp:ContentPlaceHolder ID="main" runat="server">
                            </asp:ContentPlaceHolder>
 </div>

espérant quand trouve la solution dans le plus bref délai
merci à tous

[SpaceFrog]

min-height et max-height ne sont pas crossbrowser me semble-t-il ?

[tvirus0]

désole pouvez vous m'éclaircir un peu plus ??

[SpaceFrog]

pas implémentés par tous les browsers ...
un peu de lecture
http://www.dustindiaz.com/min-height-fast-hack/

[tvirus0]

mais sa marche sur firefox, j'ai fait les teste sur qui marche , dans ce code tous marche même que si je supprime une ligne les div change de position

[SpaceFrog]

pas crossbrowser veut justement dire que ce n'est pas implémenté à l'identique sur tous les browsers, voire pas du tout sur certains ...

=> hack css pour palier les lacunes de certains navigateurs ...

[Sergejack]

Tu peux mettre un DIV width 0, float left, height xxx pour forcer le remplissage en hauteur.

Ou avec la première cellulle d'un tableau à 2 cellulles (peut-être plus fiable).

[tvirus0]

j'ai essaye une autre div rien
j'ai utilisé des contrôles en ajoutant clear:both rien non plus
je suis KO

[tvirus0]

je voulais vous donnez des captures pour mieux comprendre

initial:niquel
http://www.imagup.com/pics/1276050814.html
lorsque le contenu change:

http://www.imagup.com/pics/1276050873.html
j'attends votre aide

[Sergejack]

mets height: 100% pour le div de ton menu.

[tvirus0]

même problème j'ai mis heigh :100%;est ce qu' il y a une astuce ou quelque
chose que j'ai pas fait

[SpaceFrog]

as tu regardé les hackcss min height sur google ?

[tvirus0]

désole mais j'ai pas bien compris le hack css

[Difré91]

Hack CSS : en français, astuces CSS. Des astuces pas forcément propre pour rendre le CSS compatible sur tout les navigateurs (browsers).

Si je comprend bien, tu as deux div qui sont censés prendre la hauteur de leur conteneur, le conteneur "page" (à propos, vu que ta page doit être unique, je mettrais un identifiant et non une classe).

Et donc, quand un des div s'étend, il étend le conteneur et l'autre devrait s'étendre aussi.

D'expérience, la hauteur en css est très mal gérée. Moi, je mettrai un div avec une propriété clear:both dans chacun de tes div content et sidebar, et fixé en bas du conteneur page (avec un bottom:0 par exemple).

Je ne sais plus exactement comment ça marche, mais tu devrait chercher dans cette direction.

[CCyrillus]

bonjour,

Ce que tu cherche a faire marche bien avec un tableau ou avec display:table & Cie si le navigateur implemente ces régles.

Pour se passer du tableau html ou via les styles il te reste la solution classiques des 'colonnes factices' . tu ne style plus les styles des deux div jouant le role visuel de colonne , mais le fond div qui les contient . Cette technique marche bien sur au moins une 'fausse' colonne en largeur fixe .

Recherche 'colonnes factice' et tu tomberas sur l'info qu'il te faut.

un height:100% dans un parent en min-height ou height:auto n'a aucun effets . Css n'est pas dynamique , par contre tu peut via js reperé la hauteur du parent et la reinjecté aux enfants.

GC

[tvirus0]

Merci pour vos réponses, mais j'ai pas trouvé le code en js pour affecter l'hauteur de div parent au div enfants?
MErci encore

[tsunamichups]

tu peu le faire en css, utilise display : table-cell;
tu donne les meme propriété a tes div que les cellules d'un tableau, notemment celle d'avoir la meme taille (hauteur)

a plus

[Apollinaire]

Bonjour,

Si c'est possible, il faut appliquer l'ensemble des backgrounds au div page (avec une image donc en repeat-y et un border) et vu que lui s'adaptera, ça simulera le fait que les 2 côtés sont toujours à la même hauteur.

Du coup le min-height s'applique à cette div, plus besoin des 2 autres.

En espérant que ça vous aide.

Edit: J'avais loupé la réponse de CCyrillus, désolé pour la répétition.

[tvirus0]

vos réponses m'ont bien aidé a mieux comprendre le problème.
mais pour le moment rien n'a pu marcher.
vous avez pas une solution par rapport au code que j'ai mis??