Remplissage espace libre sur un div
Fermé
dani
-
18 août 2011 à 12:51
coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 - 19 août 2011 à 18:54
coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 - 19 août 2011 à 18:54
A voir également:
- Remplissage espace libre sur un div
- Espace insécable word - Guide
- Comment liberer de l'espace sur gmail - Guide
- Libre office gratuit - Guide
- LibreOffice : l'alternative libre et gratuite à Microsoft Office - Télécharger - Suite bureautique
- Image libre de droit gratuite google - Guide
11 réponses
Titi La Fronde
Messages postés
67
Date d'inscription
jeudi 28 juillet 2011
Statut
Membre
Dernière intervention
12 septembre 2011
3
18 août 2011 à 16:53
18 août 2011 à 16:53
utilise les tailles relatives
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
c'est ce que j'ai fais, mais le problème c'est que ça donne une taille fixe (donc en %) mais pas relative
coeus
Messages postés
3021
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
119
Modifié par coeus le 19/08/2011 à 14:46
Modifié par coeus le 19/08/2011 à 14:46
Salut,
Ça risque de ne pas marcher. Si tu mets une taille absolue à #A, une taille relative à #D ne vas pas s'adapter très bien...
Quelques solutions :
1.
Tu utilises un div#container (nom fictif) qui a l'attribut display:table;
Dans #container, tu mets un div#row qui a l'attribut display:table-row;
Et dans ton div#row, tu mets #A et #D, qui ont tous les deux l'attribut display:table-cell;
De cette manière, #A et #D vont se comporter comme s'ils étaient des balises <td> dans un <table>. Tu n'as qu'à donner un width à ton #container (qui peut être de 100% si tu veux qu'il prenne toute la page), tu laisses #A à son width de 400px, et normalement, #D devrait prendre la place qui reste pour remplir #container.
Après tu joueras avec #B et #C comme tu veux, tu peux expérimenter...
2.
Javascript. Je n'ai pas de code sous la main, mais il y a moyen de récupérer l'attribut innerWidth du body, ou de l'objet window. Le innerWidth est la largeur réelle, excluant les barres de défilement, les menus et les autres attributs (choses que parfois, les attributs CSS ne calculent pas). En ayant cet attribut, tu peux calculer la largeur que devrait avoir ta division (i.e : (largeur = body.innerWidth-400)). Ensuite tu fais une fonction qui recalcule cette largeur à chaque resize de la fenêtre et à chaque chargement de la page.
Attention : je n'ai pas testé l'utilisabilité de cette solution et sa stabilité sur plusieurs navigateurs. Si tu choisis cette voie, teste bien ! Aussi, j'ai tendance à la déconseiller ; plusieurs utilisateurs désactivent le Javascript pour "plus de sécurité".
3.
Tu donnes une valeur relative (en %) à #A aussi bien qu'à #D.
4.
Tu donnes une valeur à #D en % qui est assez petite pour convenir à un affichage en 1024px de largeur. Ça va laisser un expace vide si l'écran du visiteur est en 1920px de largeur (ou plus), mais au moins il va tout voir.
Voilà. J'espère que ça t'aide ! ;-)
Avant de critiquer quelqu'un, marche un mile dans ses souliers. Comme ça, s'il est enragé par ta critique, il est à un mile de distance et pieds nus.
Ça risque de ne pas marcher. Si tu mets une taille absolue à #A, une taille relative à #D ne vas pas s'adapter très bien...
Quelques solutions :
1.
Tu utilises un div#container (nom fictif) qui a l'attribut display:table;
Dans #container, tu mets un div#row qui a l'attribut display:table-row;
Et dans ton div#row, tu mets #A et #D, qui ont tous les deux l'attribut display:table-cell;
De cette manière, #A et #D vont se comporter comme s'ils étaient des balises <td> dans un <table>. Tu n'as qu'à donner un width à ton #container (qui peut être de 100% si tu veux qu'il prenne toute la page), tu laisses #A à son width de 400px, et normalement, #D devrait prendre la place qui reste pour remplir #container.
Après tu joueras avec #B et #C comme tu veux, tu peux expérimenter...
2.
Javascript. Je n'ai pas de code sous la main, mais il y a moyen de récupérer l'attribut innerWidth du body, ou de l'objet window. Le innerWidth est la largeur réelle, excluant les barres de défilement, les menus et les autres attributs (choses que parfois, les attributs CSS ne calculent pas). En ayant cet attribut, tu peux calculer la largeur que devrait avoir ta division (i.e : (largeur = body.innerWidth-400)). Ensuite tu fais une fonction qui recalcule cette largeur à chaque resize de la fenêtre et à chaque chargement de la page.
Attention : je n'ai pas testé l'utilisabilité de cette solution et sa stabilité sur plusieurs navigateurs. Si tu choisis cette voie, teste bien ! Aussi, j'ai tendance à la déconseiller ; plusieurs utilisateurs désactivent le Javascript pour "plus de sécurité".
3.
Tu donnes une valeur relative (en %) à #A aussi bien qu'à #D.
4.
Tu donnes une valeur à #D en % qui est assez petite pour convenir à un affichage en 1024px de largeur. Ça va laisser un expace vide si l'écran du visiteur est en 1920px de largeur (ou plus), mais au moins il va tout voir.
Voilà. J'espère que ça t'aide ! ;-)
Avant de critiquer quelqu'un, marche un mile dans ses souliers. Comme ça, s'il est enragé par ta critique, il est à un mile de distance et pieds nus.
Va falloir que tu m'explique mieux ce que tu veux.
Tu veux que ton champ texte aille jusqu'au bout à droite?
Tu veux que le div D aille jusqu'en bas?
Tu veux que ton champ texte aille jusqu'au bout à droite?
Tu veux que le div D aille jusqu'en bas?
je veux que mon div "D" aille jusqu'au bout de mon div "A" (en hauteur et en largeur) et que mon textarea qui ce trouve dans "D" lui aussi aille jusqu'au bout. Mais tous ça sans hauteur ou largeur fixe (qu'ils s'adaptent automatiquement)
J'ai essayé ta méthode 1 comme tu peux le voir mais ça ne fonctionne pas
#Y {
display: table;
}
#row {
display: table-row;
}
#A {
background-color: #FCF;
height: 200px;
width: 400px;
display: table-cell;
}
#B {
background-color: #0CF;
height: 30px;
width: 200px;
}
#C {
background-color: #0CC;
height: 30px;
width: 400px;
}
#D {
background-color: #CF9;
display: table-cell;
}
</style>
</head>
<body>
<div id="Y">
<div id="Z">
<div id="A">
<div id="B"></div>
<div id="C"></div>
<div id="D"><textarea name="text" style=""></textarea></div>
</div>
</div>
</div>
</body>
#Y {
display: table;
}
#row {
display: table-row;
}
#A {
background-color: #FCF;
height: 200px;
width: 400px;
display: table-cell;
}
#B {
background-color: #0CF;
height: 30px;
width: 200px;
}
#C {
background-color: #0CC;
height: 30px;
width: 400px;
}
#D {
background-color: #CF9;
display: table-cell;
}
</style>
</head>
<body>
<div id="Y">
<div id="Z">
<div id="A">
<div id="B"></div>
<div id="C"></div>
<div id="D"><textarea name="text" style=""></textarea></div>
</div>
</div>
</div>
</body>
coeus
Messages postés
3021
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
119
Modifié par coeus le 19/08/2011 à 17:58
Modifié par coeus le 19/08/2011 à 17:58
Oops désolé, je n'avais pas vu que #D était à l'intérieur de #A...
Dans ce cas, je pense que la solution serait :
<code>
<body>
<div id="Y">
<div id="A">
<div id="B"> </div>
<div id="C"> </div>
<div id="D"><textarea name="text" style="">
</textarea>
</div>
</div>
</div>
</body>
Dans ce cas, je pense que la solution serait :
#Y {
display: table;
}
#A {
background-color: #FCF;
height: 200px;
width: 400px;
display: table-row;
}
#B {
background-color: #0CF;
height: 30px;
width: 200px;
display: table-cell;
}
#C {
background-color: #0CC;
height: 30px;
width: 400px;
display: table-cell;
}
#D {
background-color: #CF9;
display: table-cell;
}
</style>
</head>
<code>
<body>
<div id="Y">
<div id="A">
<div id="B"> </div>
<div id="C"> </div>
<div id="D"><textarea name="text" style="">
</textarea>
</div>
</div>
</div>
</body>
Bon bin avec le code suivant ca ne donne rien non plus
#Y {
display: table;
}
#A {
background-color: #FCF;
height: 200px;
width: 400px;
display: table-row;
}
#B {
background-color: #0CF;
height: 30px;
width: 200px;
display: table-cell;
}
#C {
background-color: #0CC;
height: 30px;
width: 400px;
display: table-cell;
}
#D {
background-color: #CF9;
display: table-cell;
}
</style>
</head>
<body>
<div id="Y">
<div id="Z">
<div id="A">
<div id="B"></div>
<div id="C"></div>
<div id="D"><textarea name="text" style=""></textarea></div>
</div>
</div>
</div>
</body>
#Y {
display: table;
}
#A {
background-color: #FCF;
height: 200px;
width: 400px;
display: table-row;
}
#B {
background-color: #0CF;
height: 30px;
width: 200px;
display: table-cell;
}
#C {
background-color: #0CC;
height: 30px;
width: 400px;
display: table-cell;
}
#D {
background-color: #CF9;
display: table-cell;
}
</style>
</head>
<body>
<div id="Y">
<div id="Z">
<div id="A">
<div id="B"></div>
<div id="C"></div>
<div id="D"><textarea name="text" style=""></textarea></div>
</div>
</div>
</div>
</body>
coeus
Messages postés
3021
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
119
19 août 2011 à 18:54
19 août 2011 à 18:54
Ok premièrement, débarasse-toi de ta div#Z.
Si ça ne marche toujours pas, peux-tu essayer de ré-expliquer ce que tu veux ? Je ne suis pas sûr de comprendre...
Sur quel navigateur testes-tu ?
Si ça ne marche toujours pas, peux-tu essayer de ré-expliquer ce que tu veux ? Je ne suis pas sûr de comprendre...
Sur quel navigateur testes-tu ?