Discussion :

[poitierjohan]

Bonjour,

Je souhaiterais placer un DIV (height:100%) MAIS, d'une hauteur 100% - 250px... Est-ce possible ?

Ma balise html, body est également en height:100%

Merci pour votre aide.

[Nesmontou]

Bonjour,

Désolé, mais je n'ai pas bien compris ce que tu souhaites faire

C'est positionner ton <div /> de telle sorte que sa bordure haute soit en bas de l'écran mais décalée de 250px vers le haut ?

Si c'est le cas, je pense que tu peux essayer quelque chose de ce type :

Code :

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

1
2
3
4
5
div {
  margin-top: -250px;
  position: absolute;
  top: 100%;
}

Je n'ai pas testé, mais l'idée est là.

Bon développement

[poitierjohan]

Bonjour,
Je n'ai pas été très clair en effet...
Donc, je vais détailler plus...

J'ai donc un DIV dont voici les paramètres CSS :

Code :

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

1
2
3
4
5
6
7
8
 
#mondiv {
   position:absolute;
   width:500px;
   top:200px;
   left:4px;
   height:100%; => //MAIS... cf plus loin...
}

Vu la hauteur de 100% et le TOP de 200px, il se fait que mon div dépasse en dessous de 200px !!! OR, je voudrais que ce DIV ne déborde pas!

Donc un code du genre pour éviter le débordement (et donc le scroll)

Code :

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

1
2
3
4
5
6
7
8
9
 
#mondiv {
   position:absolute;
   width:500px;
   top:200px;
   left:4px;
   height:100%;
   margin-bottom:200px; // ??????????????????????
}

En JS c'est possible en faisant un petit calcul... Mais je trouve ce là fastidieux à la longue...
Je pense alors qu'une solution en CSS pourrait être envisageable...

Est-ce le cas ?

Merci beaucoup...

[Nesmontou]

Re,

C'est plus clair avec ces précisions

Tu as plusieurs possibilités pour faire ça :

• La propriété CSS3 box-sizing : http://designshack.developpez.com/tu...lisateur/#LIII
• Ne pas préciser de hauteur mais indiquer les propriétés bottom et top

Code :

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

1
2
3
4
5
6
7
8
#mondiv {
    bottom: 0;
    height: auto;
    left: 4px;
    position: absolute;
    top: 200px;
    width: 500px;
}

Je fais ça de mémoire et je n'ai pas pu tester

Dis-moi si ça répond à tes attentes.