Définir la hauteur de 2 div à 100%

Version imprimable

Bonjour,

J'aimerai séparer l'écran de l'utilisateur avec 2 div de couleurs différentes et avec une largeur de 50%

ceci a été fait pas de soucis, mais j'aimerai aussi que la hauteur des couleurs des 2 div soit toujours affichés même lorsqu'il y a une scrollbar et même si l'écran de l'utilisateur du site à d'autres résolutions.

Pour l'instant j'ai défini à une hauteur de 1500 pixel, mais après il y a du blanc.....

merci d'avance pour votre aide!

ci-dessous le code que l’emploi:
Code:

1 2 3 4 5 6 7 8 <div id="gauche" style="width:50%; height:1500px; background-color:#F90; margin:0px; padding:0px; position:relative; top:-10px; z-index:1;">   </div> <div id="droite" style="width:50%; height:1500px; background-color:#0066FF; position:relative; float:right; top:-1510px; right:0px; z-index:1;">   </div>

C'est parce que tu définis un top négatif avec un position:relative;.

Tu peux plutôt faire comme ça :
Code:

1 2 3 4 5 6 7 <div id="gauche" style="width:50%; height:1500px; background-color:#F90; float:left;">   </div> <div id="droite" style="width:50%; height:1500px; background-color:#0066FF; float:right;">   </div>
En n'oubliant pas de mettre un margin:0; sur le body.

03/09/2014, 17h11
black-hawk-down

Tu voudrais pas plutôt que la hauteur s'adaptent en fonction du contenu (d'où son problème de couleur de background) ?
Puisque le flottement fait sortir les div du flux la hauteur s'en trouve impactée.
C'est pourquoi il a mis un 1500 pixels pour être large.

J'ai plus l'impression que c'est un problème de ce genre qu'il veut résoudre :koi:

Citation:

Envoyé par surfeur2

Pour l'instant j'ai défini à une hauteur de 1500 pixel, mais après il y a du blanc.....

Pour faire du pouce sur l'idée de Bisûnûrs, voici une solution :

Code HTML:
Code:

1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id="gauche"></div> <div id="droite"></div> </body> </html>
Code CSS:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 body { height: 1500px; margin: 0px; padding: 0px; } div { width:50%; height:100%; } #gauche { float: left; background-color:#F90; } #droite { float: right; background-color:#0066FF; }
Et bien sûr, JS Bin (edit) pour que vous expérimenter le tout.