Remplissage espace libre sur un div
dani
-
coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention -
coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention -
Salut à tous,
après quelque recherche à ce sujet et sans être parvenu à trouver une solution, je viens solliciter votre aide car je souhaiterais que mon div "D" puis automatique remplir l'espace libre qui lui reste jusqu'à la fin du div "A"
Merci d'avance pour vos info!
#A {
background-color: #FCF;
height: 200px;
width: 400px;
}
#B {
background-color: #0CF;
height: 30px;
width: 200px;
}
#C {
background-color: #0CC;
height: 30px;
width: 400px;
}
#D {
height: 50px;
background-color: #CF9;
}
</style>
</head>
<body>
<div id="A">
<div id="B"></div>
<div id="C"></div>
<div id="D"><textarea name="text" style="overflow: inherit;"></textarea></div>
</div>
après quelque recherche à ce sujet et sans être parvenu à trouver une solution, je viens solliciter votre aide car je souhaiterais que mon div "D" puis automatique remplir l'espace libre qui lui reste jusqu'à la fin du div "A"
Merci d'avance pour vos info!
#A {
background-color: #FCF;
height: 200px;
width: 400px;
}
#B {
background-color: #0CF;
height: 30px;
width: 200px;
}
#C {
background-color: #0CC;
height: 30px;
width: 400px;
}
#D {
height: 50px;
background-color: #CF9;
}
</style>
</head>
<body>
<div id="A">
<div id="B"></div>
<div id="C"></div>
<div id="D"><textarea name="text" style="overflow: inherit;"></textarea></div>
</div>
A voir également:
- Remplissage espace libre sur un div
- Espace insécable - Guide
- Espace de stockage gmail plein - Guide
- Libre office en francais - Télécharger - Suite bureautique
- Libre office gratuit - Guide
- Espace stockage google - Guide
11 réponses
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
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>
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>
