Page qui descend jusqu'en bas

**Pelote2012** · 23/11/2013, 09h43

Bonjour,

J'essaie de faire une page qui quand elle est vide va jusqu'en bas (à mon footer) j'ai trouvé un code, mais le problème et que qu'en je met du contenu qui dépasse la hauteur de mon écran ... la couleur du div contenu ne suit pas

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
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            top: 0px;
            left: 0px;
            bottom: 0px;
            font-size: .80em;
            font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
            margin: 0px;
            padding: 0px;
            color: #696969;
            background-color: #FFFFFF;
            height: 100%;
        }
        
        div#page
        {
            min-height: 100%;
            position: relative;
            width: 960px;
            background-color: #C9DB93;
            margin: 20px auto 0px auto;
        }
        
        div#bloc-principal
        {
            padding-bottom: 100%;
        }
        
        div#header
        {
            top: 0px;
            position: absolute;
            width: 800px;
            float: left;
            text-align: right;
        }
        
        div#contenu
        {
            top: 320px;
            position: absolute;
        }
        
        div#footer
        {
            bottom: 0;
            clear: both;
            text-align: center;
            position: fixed;
            font-size: large;
            background-color: #FFFFFF;
            width: 960px;
        }
    </style>
</head>
<body>
    <div id="Total">
        <div id="page">
            <div id="bloc-principal">
                <div>
                    <div id="header">
                        header
                    </div>
                    <div id="contenu">
                        contenu
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        toto<br />
                        toto<br />
                        toto<br />
                        toto<br />
                        toto<br />
                        toto<br />
                        toto<br />
                        toto<br />
                    </div>
                </div>
            </div>
            <div id="footer">
                pied
            </div>
        </div>
    </div>
</body>
</html>

Ici le texte apparaît en dehors. Au démarrage la hauteur est bien calculée , mais quand on utilise le scroll, c'est pas propre.

Quelqu'un pourrait m'aider à corriger.
Merci

**Pelote2012** · 23/11/2013, 14h51

J'avais bien compris qu'il y avait un problème d'overflow ...

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
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            top: 0px;
            left: 0px;
            bottom: 0px;
            font-size: .80em;
            font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
            margin: 0px;
            padding: 0px;
            color: #696969;
            background-color: #FFFFFF;
            height: 100%;
        }
        
        div#page
        {
            position: relative;
            width: 960px;
            background-color: #C9DB93;
            margin: 20px auto 0px auto;
            overflow: auto;
            margin-bottom:20px;
        }
        
        div#bloc-principal
        {
            padding-bottom: 100%;
        }
        
        div#header
        {
            top: 0px;
            position: absolute;
            width: 800px;
            float: left;
            text-align: right;
        }
        
        div#contenu
        {
            top: 320px;
            position: absolute;
        }
        
        div#footer
        {
            bottom: 0;
            clear: both;
            text-align: center;
            position: fixed;
            font-size: large;
            background-color: #FFFFFF;
            width: 960px;
        }
    </style>
</head>
<body>
    <div id="Total">
        <div id="page">
            <div id="bloc-principal">
                <div>
                    <div id="header">
                        header
                    </div>
                    <div id="contenu">
                        contenu
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        toto<br />
                        toto<br />
                        toto<br />
                        toto<br />
                        toto<br />
                        toto<br />
                        toto<br />
                        toto<br />
                    </div>
                </div>
            </div>
            <div id="footer">
                pied
            </div>
        </div>
    </div>
</body>
</html>

Mais je ne veux pas du scroll au niveau de div#Page ....
je voudrait n'avoir que le scroll de la page complète

**Muchos** · 23/11/2013, 18h38

Mais je ne veux pas du scroll au niveau de div#Page

Il faut donc changer la valeur de la propriété SCROLL.

**Pelote2012** · 23/11/2013, 19h36

Sauf que pour avoir la page verte jusqu'en bas du scroll j'ai du mettre overflow:auto sur div#page

Donc il y a un problème dans mes CSS, mais quoi?

Je veux une page avec header/contenu/footer(fixe toujours en bas d'écran)
le contenu doit descendre jusqu'au footer, même si il est vide. Mais doit s'agrandir si le contenu est plus grand que l'écran. mais je veux que le scroll global et pas un scroll en plein milieu de ma page.

Pour faire descendre le contenu jusque le footer à vide , j'ai ce code

Code css :

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

1
2
3
4
div#bloc-principal
{
    padding-bottom: 100%;
}

Mais ça ne marche pas comme il faut car du coup bloc-principal s'arrête net au footer est mon div#content lui poursuit...

Avec ceci

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            top: 0px;
            left: 0px;
            bottom: 0px;
            font-size: .80em;
            font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
            margin: 0px;
            padding: 0px;
            color: #696969;
            background-color: #FFFFFF;
            height: 100%;
        }
        
        div#page
        {
            position: relative;
            width: 960px;
            margin: 20px auto 0px auto;
        }
        
        div#header
        {
            top: 0px;
            position: absolute;
            width: 960px;
            float: left;
            text-align: right;
            height: 320px;
            background-color: #BBBBBB;
        }
        
        div#contenu
        {
            top: 320px;
            position: relative;
            bottom: 25px;
            background-color: #C9DB93;
            width: 960px;
            padding-bottom:25px;
        }
        
        div#footer
        {
            bottom: 0;
            clear: both;
            text-align: center;
            position: fixed;
            font-size: large;
            background-color: #AAAAAA;
            width: 960px;
            height: 25px;
        }
    </style>
</head>
<body>
    <div id="Total">
        <div id="page">
            <div id="header">
                header
            </div>
            <div id="contenu">
                contenu
 
                toto<br />
                toto<br />
                toto<br />
                toto<br />
                toto<br />
                toto<br />
                toto<br />
                toto<br />
            </div>
            <div id="footer">
                pied
            </div>
        </div>
    </div>
</body>
</html>

Si je mets plein de contenu ça marche
mais si comme l'exemple, j'ai peu de contenu ... ça ne va pas jusqu'en bas

**NoSmoking** · 24/11/2013, 00h00

Bonsoir,
je changerais légèrement la structure du document

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
<div id="page">
  <div id="header">
     header
  </div>
  <div id="contenu">
     contenu toto<br/>
    toto<br/>
    toto<br/>
    toto<br/>
    toto<br/>
    toto<br/>
    toto<br/>
    toto<br/>
  </div>
  <div id="footer">
     pied
  </div>
</div>

et en aménageant le CSS comme suit

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
html {
  height:100%; /* AJOUT */
}
div#page {
  position:relative;
  width:960px;
  margin:20px auto 0px auto;
  min-height:100%;          /* AJOUT */
  background-color:#C9DB93; /* le background ICI */
}
div#contenu {
  top:320px;
  position:relative;
  bottom:25px;
/* background-color:#C9DB93;   /* report sur div#page */
  width:960px;
  padding-bottom:25px;
}

**Pelote2012** · 24/11/2013, 18h46

En reprenant ton code, il reste un souci, quand tu remet les espaces pour avoir un grand contenu... tu reviens sur mon 1er problème c'est à dire que le vert ne va pas jusqu'au bout du scroll
le div page ne va pas jusqu'en bas.

Par contre si tu remets la couleur sur le div contenu, ni vu ni connu, c'est correct... ausii bien avec peu de contenu que beaucoup

Merci

Code htm :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        html
        {
            height: 100%; /* AJOUT */
        }
 
        body
        {
            top: 0px;
            left: 0px;
            bottom: 0px;
            font-size: .80em;
            font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
            margin: 0px;
            padding: 0px;
            color: #696969;
            background-color: #FFFFFF;
            height: 100%;
        }
 
        div#page
        {
            position: relative;
            width: 960px;
            margin: 20px auto 0px auto;
            min-height: 100%; /* AJOUT */
            background-color: #C9DB93; /* le background ICI */
        }
 
        div#header
        {
            top: 0px;
            position: absolute;
            width: 960px;
            float: left;
            text-align: right;
            height: 320px;
            background-color: #BBBBBB;
        }
 
        div#contenu
        {
            top: 320px;
            position: relative;
            bottom: 25px; 
             background-color:#C9DB93;   
            width: 960px;
            padding-bottom: 25px;
        }
 
        div#footer
        {
            bottom: 0;
            clear: both;
            text-align: center;
            position: fixed;
            font-size: large;
            background-color: #AAAAAA;
            width: 960px;
            height: 25px;
        }
 
    </style>
</head>
<body>
    <div id="page">
        <div id="header">
            header
        </div>
        <div id="contenu">
            contenu toto<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            toto<br />
            toto<br />
            toto<br />
            toto<br />
            toto<br />
            toto<br />
            toto<br />
        </div>
        <div id="footer">
            pied
        </div>
    </div>
</body>
</html>

**Pelote2012** · 24/11/2013, 19h09

Maintenant que ça marche sur une page html ...
Je voulais le mettre dans une masterPage et ça ne marche plus

De nouveau le div contenu ne va pas jusqu'au footer s'il n'y a rien dedans

code de ma master

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
20
21
22
23
24
25
26
27
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site1.master.vb" Inherits="YannickIngenierie.Site1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" media="screen" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="page">
        <div id="header">
            header
        </div>
        <div id="contenu">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div id="footer">
            pied
        </div>
    </div>
    </form>
</body>
</html>

code de ma css

Code css :

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
html
{
    height: 100%; /* AJOUT */
}
 
body
{
    top: 0px;
    left: 0px;
    bottom: 0px;
    font-size: .80em;
    font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
    background-color: #FFFFFF;
    height: 100%;
}
 
div#page
{
    position: relative;
    width: 960px;
    margin: 20px auto 0px auto;
    min-height: 100%; /* AJOUT */
    background-color: #C9DB93; /* le background ICI */
}
 
div#header
{
    top: 0px;
    position: absolute;
    width: 960px;
    float: left;
    text-align: right;
    height: 320px;
    background-color: #BBBBBB;
}
 
div#contenu
{
    top: 320px;
    position: relative;
    bottom: 25px;
    background-color: #C9DB93;
    width: 960px;
    padding-bottom: 25px;
}
 
div#footer
{
    bottom: 0;
    clear: both;
    text-align: center;
    position: fixed;
    font-size: large;
    background-color: #AAAAAA;
    width: 960px;
    height: 25px;
}

code généré par VSS2010

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
 
</title><link href="/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
    <form method="post" action="WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkomUn8VGHh/sszlxd+3oz1FbEtT6Moq0AtK4+4eWmq6s=" />
</div>
 
    <div id="page">
        <div id="header">
            header
        </div>
        <div id="contenu">
 
contenu toto<br />
            toto<br />
            toto<br />
            toto<br />
            toto<br />
            toto<br />
            toto<br />
            toto<br />
 
        </div>
        <div id="footer">
            pied
        </div>
    </div>
    </form>
</body>
</html>

qu'ai-je encore fais?

**Pelote2012** · 24/11/2013, 19h18

Bon en fait en jetant dans la master le form1 ... ça marche mieux

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
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site1.master.vb" Inherits="YannickIngenierie.Site1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
 
    <div id="page">
        <div id="header">
            header
        </div>
        <div id="contenu">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div id="footer">
            pied
        </div>
    </div>
 
</body>
</html>

Comme je n'utilise pas le submit ... ça me va

Page qui descend jusqu'en bas

CSS

Discussions similaires

Partager

Partager