Agrandissement de la longueur du DIV par nombre de px prédéfini

**koKoTis** · 14/12/2013, 04h24

Bonjour, j'ai besoin d'un code pour qu'un DIV agrandisse de la longueur du DIV par nombre de px prédéfini.
C'est à dire que le DIV quand il s'agrandi pour s'adapter à la longueur de sont contenu s'agrandissent par 200 pixel, c'est a dire, si mon DIV fait 600 px et que je rajoute 125 px de texte, le DIV rajouter 200 px de longueur.
Je ne sais pas si je me suis bien expliquer, mais quelqu'un saurait-il m'aider ?

Edit: Je viens de tomber sur: line-height, mais il adapte la ligne, donc laisse un gros espace sous le texte, je voudrai la même chose mais qui ne s'appliquer qu'à la hauteur du DIV.

**Muchos** · 14/12/2013, 06h44

et que je rajoute 125 px de texte

Vous ne seriez pas infographiste print à la base?

En Web, je ne pense pas que "125px de texte" ait de sens.
Néanmoins, la fonction calc() [css3 - expérimentale] peut éventuellement vous intéresser. Sinon, peut-être en JavaScript…

**koKoTis** · 14/12/2013, 06h50

Je me suis mal exprimer, je veut dire si je rajoute du texte qui me rajoute 150 px environ de longueur que le calque lui prennent 200 px.

Je vais voir la fonction dont tu me parle, merci

**Muchos** · 14/12/2013, 06h55

que le calque lui prennent 200 px

Il y a peut-être une piste dans ce récent sujet.

PS: Pourquoi on est sur le forum, un samedi à 7h du matin ·_·' ?

**koKoTis** · 14/12/2013, 06h59

Envoyé par Muchos

Il y a peut-être une piste dans ce récent sujet.

Justement, j'ai une image PNG en fond de DIV, et je veut que le DIV s'addapte a la hauteur du PNG à chaque agrandissement:

http://www.zethy.lunnatick.fr/discographie.php

Si non avec la fonction CALC je ne trouve pas la bonne formule.

**elfamine** · 14/12/2013, 10h42

une solution à court terme serait de mettre un padding-bottom: 63px; à #corps_dic.

une solution en jquery peut etre ?

Code javascript :

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

1
2
3
4
5
6
7
8
 
var height = $('#corps_dic').height();
var mod = height % 129;
var padding = 129 - mod;
 
if (mod) $('#corps_dic').css({
    'padding-bottom': padding + 'px'
});

**koKoTis** · 14/12/2013, 10h47

Merci

La balise jquery et la même que JavaScript ?

Edit: En fai la solution, n'est pas bonne, je ne veut pas ajouter 129px an bas du calque, mais que la calque s'allonge par inteval de 190 px

**elfamine** · 14/12/2013, 11h15

l'image que t'as mis en background est de 129px. pour avoir l'effet que tu souhaite il faudrait que le height de "corps_dic" soit un multiple de 129px.

1 - on recupére le height actuel de "corps_dic" (dans le cas échéant 840px)
2 - 840%129 (840 modulo 129) = 66
3 - puisque la valeur n'est pas égale à 0 on compense ; 129px-66px = 63px
4 - on met donc 63px en padding-bottom

c'est certainement pas la seule solution, mais c'est la première à laquelle je peux penser

voila le code en javascript pure

Code javascript :

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

1
2
3
4
5
6
7
 
var block = document.getElementById("corps_dic"),
    height = block.clientHeight,
    mod = height % 129,
    padding = 129 - mod+"px";
 
if (mod)  block.style.paddingBottom = padding;

en espérant que ca puisse t'aider ,)

**koKoTis** · 14/12/2013, 11h23

Merci mais ca ne fonctionne pas, j'ai essayer en placer le JS entre Head et Head et entre Body et Body rien n'y fait

**elfamine** · 14/12/2013, 11h30

essaye comme ca pour voir :

Code html :

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
 
<div id="corps_dic">
si ton div est à ce niveau... 
</div>
.
.
.
<script>
//ton script doit etre à ce niveau soit : plus bas dans le body
(function() {
var block = document.getElementById("corps_dic"),
    height = block.clientHeight,
    mod = height % 129,
    padding = 129 - mod+"px";
 
if (mod)  block.style.paddingBottom = padding;
 
})();
</script>