Contenu page tronqué par le footer

**GDS_Strou** · 15/12/2015, 15h02

bonjour,

Sur l'imprim écran ci-dessous, on peut distinguer une partie header en rouge, une partie content en jaune et une partie footer en vert.
Mon problème est le suivant, mon header et mon footer sont à priori paramétré pour etre fixe. Ils sont systématiquement affiché à l'écran peu importe la taille du content.
Ainsi comme on peut le voir sur l'impression écran, si mon content est grand, on voit qu'il est tronqué et qu'une barre de défilement s'affiche si on veut voir le bas.

J'aimerai que mon footer s'affiche automatiquement en dessous du content pour que mon content ne soit pas coupé comme actuellement lorsqu'il est plus grand que la page.
Merci beaucoup par avance pour votre aide.

Voici le template de ma page :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<h:html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:p="http://primefaces.org/ui"
       xmlns:pe="http://primefaces.org/ui/extensions">
 
 
<h:head>
       <h:outputStylesheet name="style.css" library="css" />
       <h:outputStylesheet name="iconesPersee.css" library="css" />
       <link rel="icon" href="resources/images/favicon.ico" type="image/ico" />
       <script src='http://localhost:8080/persee-client-jsf/resources/javascripts/scripts.js' />
</h:head>
 
 
<h:body>
       <div id="header">
             <p:growl id="messages" />
             <table style="width: 100%;" border="0">
                    <tr>
                           <td style="width: 10%"><br/></td>
                           <td align="center">
                                  <td>
                                        <div style="float: right">
                                               <img src="./../../resources/images/perseeLogo100x100.png" alt="P" />
                                        </div>
                                      </td>
 
                           <td style="width: 10%"><br/></td>
                    </tr>
                    <tr>
                           <td colspan="5"><br /></td>
                    </tr>
             </table>
       </div>
 
 
       <div id="menu">
             <h:form id="connexion">
                           <p:menubar orientation="horizontal">
 
                                  <p:menuitem value="Accueil" url="/accueil.xhtml" />
                                  <p:submenu label="Administration">
                                        <p:submenu label="Comptes">
                                               <p:menuitem value="Creer compte" url="/web/compte/creerCompte.xhtml" />
                                        </p:submenu>
 
                                  <f:facet name="options">
                                        <p:outputLabel style="margin-right:10px"
                                               value="Vous etes connecté en tant que :" />
                                        <p:outputLabel style="margin-right:10px"
                                               value="#{connexionBean._identifiant}" />
                                        <p:commandButton style="margin-right:10px" value="Deconnexion" actionListener="#{connexionBean.seDeconnecter}" />
                                  </f:facet>
                           </p:menubar>
                    </h:form>
       </div>
       <!-- fin menu -->
 
 
 
       <div id="content">
             <ui:insert name="content"></ui:insert>
       </div>
 
 
 
       <div id="footer">
             <p:panel>
                    <table border="0" width="100%">
                           <tr>
                                  <td style="width: 90%; font-size: 12px">Version 0.2</td>
                           </tr>
                    </table>
             </p:panel>
       </div>
       <!--  fin footer -->
 
</h:body>
</h:html>

Voici mon fichier CSS :

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
ui-outputlabel-rfi
{
       display: none;
       color: yellow;
}
 
h1
{
           color: #9BCC60;
    font-family: tahoma;
    font-size: 70px;
}
#page
{
       min-height: 100%;
       position: relative;
}
 
#content
{
       padding-bottom: 100px;    
       height: 550px;
    overflow: auto;
    position: fixed;
    top: 200px;
    width: 99%;
}
 
#header
{
       position: fixed;
    width: 100%;
    color: #9BCC60;
    top: -8px;
}
 
#menu
{
       position: fixed;
    top: 145px;
    width: 99%;
}
 
#footer
{
    clear: both;
    color: white;
    height: 25px;
    z-index: 110;
    left: 0px;
    color: #9BCC60;
    bottom: 0;
    left: 0;
    padding-left: 8px;
    position: fixed;
    top: 860px;
    width: 99%;
 
}
 
body {
    background-color: #695444;
    color: #9BCC60;
    background-image: url("./../resources/images/fondPersee.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;   
}
 
.css1{
       padding-left:300px;
}
 
.css2{
       padding-left:400px;
}
 
.css3{
       padding-left:300px;
}
 
.css4{
       padding-left:400px;
}

Nom : imprim.png
Affichages : 354
Taille : 718,8 Ko

**NoSmoking** · 15/12/2015, 20h25

Bonjour,
trop de position:fixed tue la mise en page.

Essaies en remplaçant padding-bottom:100px par bottom:100px, mais pense à changer de système de positionnement

.

Pour rappel : c'est le code HTML généré qu'il est important de communiquer.

Invité · 16/12/2015, 06h41

Bonjour,

mon header et mon footer sont à priori paramétré pour etre fixe. Ils sont systématiquement affiché à l'écran peu importe la taille du content.

J'aimerai que mon footer s'affiche automatiquement en dessous du content pour que mon content ne soit pas coupé comme actuellement lorsqu'il est plus grand que la page.

Ces 2 notions sont incompatibles.

Par contre, intéresse-toi au "sticky footer".

**miss_socrates** · 26/12/2015, 06h24

1. Pour le code html: il faut le modifier, l'utilisation des tableaux pour la mise en page est obsolète depuis plus de 10 ans ! Et les cellules d'un tableau ne vont pas se mettre en place de manière fluide comme des div mais elles sont statiques.

2. Pour le code css:

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
#content{
    padding-bottom: 10px;    
    height: auto;
    overflow: auto;
    position: relative;
    width: 100%;
}
 
#header{
    position: absolute;
    width: 100%;
    color: #9BCC60;
    top: -8px;
}
 
#menu{
   width: 100%;
}
 
#footer{
    clear: both;
    color: white;
    height: 25px;
    z-index: 110;
    margin: 0 auto;
    color: #9BCC60;
    padding-left: 8px;
    position: relative;
    width: 100%;
 
}
 
body{
    background-color: #695444;
    color: #9BCC60;
    background-image: url("./../resources/images/fondPersee.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;   
}

**GDS_Strou** · 06/01/2016, 16h52

Merci beaucoup miss_socrates c'est tout à fait cela que je voulais faire avec la modification du CSS.

Contenu page tronqué par le footer

CSS

Vue hybride

Discussions similaires

Partager

Partager