Application web et hauteur

Mocky · 01/08/2011, 15h13

Bonjour,
cela fait deux jours que j'écume les forums et le net au vu d'une solution à mon problème mais rien n'y fait, je ne trouve rien ! Je viens donc à vous pour me filer un coup de main

Ce que j'essaye de faire :
Avoir une page web qui se dimensionne à la taille de mon écran mais qui ne dépasse pas. Le header toujours en haut (100px), et le footer toujours en bas(50px). Le content doit remplir le reste de la page avec 15px de marge en haut et en bas.

voici la structure HTML de ma page :

Code :

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
20
 
<body>
    <div id="vlWrapper">
        <div class="header">
            <div id="vlHeaderTop"></div>
            <div id="vlHeaderBottom">
                <div id="vlHeaderBottomLeft"></div>
                <div id="vlHeaderBottomRight"></div>
                <div id="vlHeaderBottomCenter"></div>
            </div>
        </div>
 
        <div class="content">
            <div id="vtab">
		<!--Mon Contenu-->
            </div>
        </div>
    </div><!-- Wrapper End -->
    <div class="footer"></div>
</body>

Voici le Css qui va avec :

Code :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
/* Makeshift CSS Reset */
{  
    margin: 0;
    padding: 0;
}  
 
/* Tell the browser to render HTML 5 elements as block */  
header, footer, aside, nav, article {  
    display: block;  
}  
 
html{
	height: 100%;
}
 
body {
    margin: 0 auto;
    font: 1em Helvetica, Arial, sans-serif;  
    background-color: #E6E6E6;
    min-height: 600px;
    min-width: 800px;
    height: 100%;
}  
 
#vlWrapper{
	position: relative;
	width: 100%;
	height: 100% !important;
	min-height: 100%;
	margin-bottom: -50px;
}
 
/* The Page Header */
.header {
	height: 100px;
    background-color: #4BAFB5;
}
#vlHeaderTop {
	height: 80px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	background-image: url('../Images/res/BackGroundLogo.png');
	background-position: center center;
	background-repeat:no-repeat;
}
 
#vlHeaderBottom {
	position: absolute;
    height: 20px;
	width: 100%;
}
 
#vlHeaderBottomRight {
	float: right;
    width: 280px;
    height: 100%;
   	background-image:url('../Images/res/BackGroundHeader2-3.png');
	background-repeat:no-repeat;
}
 
#vlHeaderBottomCenter {
   	background-image: url('../Images/res/BackGroundHeader2-2.png');
	background-repeat: repeat-x;
    width: 100%;
    height: 100%;
}
 
#vlHeaderBottomLeft {
	float: left;
    width: 280px;
    height: 100%;
   	background-image:url('../Images/res/BackGroundHeader2-1.png');
	background-repeat:no-repeat;
}
 
/* The Page Footer */
.footer{
	background-image: url('../Images/res/BackGroundFooter.png');
    background-repeat: repeat-x;
    height: 50px;
    width: 	100%;
	background-color: #E6E6E6;
}
 
/* The page content */
.content {
	position:relative;
	margin-top: -100px;
	margin-bottom: -50px;
	width: 100%;
	height: 100% !important;
	min-height: 100%;
}
 
/* tabs */
#vtab {
    position:absolute;
    width: 98%;
/*    height: 100%;*/
    margin-right: auto;
    margin-left: auto;
    padding-top: 115px;
    padding-bottom: 65px;
}

En ajoutant un height : 100% à vtabs, le div dépasse de loin la taille de ma fenêtre ce que je veux éviter. La classe contant j'ai réussit à le rentrer dans la taille de la fenêtre mais en mettant des marges négatives.

Merci d'avance pour votre aide!

12monkeys · 08/08/2011, 22h34

Bonsoir

Ce ne serait pas ce que tu recherches ?

http://css.developpez.com/tutoriels/...ers/exemple_1/

08/08/2011, 22h34	#2
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Bonsoir Ce ne serait pas ce que tu recherches ? http://css.developpez.com/tutoriels/...ers/exemple_1/ __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email