Discussion :

[Azerx]

Bonjour,
je suis en train de créer un site web ; pour la taille de mes <div> j'utilise bien évidemment des valeurs en "%" et jusque là tout fonctionnait bien!

Mais la page d'accueil me pose quelques soucis
La structure de ma page est représentée ci-dessous:


J'ai donc:
un <header>

Code :

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

height: 10%;

une <div1>

Code :

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

1
2
3
height: 33%;
width: 100%;
padding-top: 2%;

contenant une <img>

Code :

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

height: 75%;

une <div2>

Code :

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

1
2
height: 49%;
width: 100%;

un <footer>

Code :

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

1
2
height: 5%;
width: 100%;

J'ai également le code CSS suivant:

Code :

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

1
2
3
4
5
6
html,body {
	margin: 0px;
	padding: 0px;
	outline: 0px;
	height: 100%;
}

Sur mon écran toutes les pages prennent bien 100% de la taille disponible, mais dès que la taille du navigateur change (mode plein écran, suppression de la barre des favoris,...) ou dès que je passe sur un écran de taille différente, le contenu ne prend plus les 100%...

Le footer remonte ou une barre blanche apparait sous celui-ci...

Merci d'avance!

P.S: Si quelqu'un sait comment diminuer la taille de l'image de mon post, ça serait plus lisible

[Azerx]

Très bien... j'ai trouvé la solution 2 minutes après avoir créé ce post (alors que j'ai bien entendu fais des tests toute la matinée)...

Solution:
Il suffit de créer une <divGlobal> englobant <div1> et <div2>, puis de donner le code suivant:
<divGlobal>

Code :

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

1
2
height: 85%  //c est à dire <div1> + <div2>
width: 100%

Puis
<div1>

Code :

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

height: 40%;

<div2>

Code :

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

height: 60% //on coupe <divGlobal> en 2 parties

Et tout marche comme il faut!