[Débutant] Positionner le footer en bas de viewport

Bonjour,

Malgré toutes les lectures (et elles sont nombreuses et variées!) je n'arrive toujours pas à positionner les footers des pages web de manière à ce qu'ils soient en bas d'écran quelque soit l'écran, si le contenu est plus petit que la page affichée...
A priori, c'est un sujet bateau, maintes fois résolu, mais j'avoue ne pas y arriver malgré les dizaines de publication testées...

Ma structure :
- un body qui contient une form
- Dans cette form un div "container" possédant une hauteur minimale de 100% et une position relative

- Du contenu géré en "PlaceHolder" (c'est ça qui bloque ?)

- Un div de bas de page en position absolu, bottom = 0, largeur 100% contenant mon texte de bas de page

D'après mes lecture, cette configuration de positionnement absolu dans une div positionnée en positionnement relative avec une hauteur de 100% du viewport est la solution préconisée...

Ci dessous mon code :

Code:

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
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="~/Diogene.css" type="text/css" rel="stylesheet" />
    <title></title>
    <script runat="server">
    </script>
</head>
 
<body style="height: 100%;margin:0;padding:0; margin-bottom: 0px; position:relative; height:100%;">
    <form id="form1" runat="server">
    <asp:ScriptManager EnablePartialRendering="true" ID="scMain" runat="server"></asp:ScriptManager>
    <div id="Container"  style="min-height:100%;position:relative;"> 
 
        <div style =" height : 50px; color: #000000; background-color: #000000; border-bottom:thin;">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Label ID="Label3" runat="server" Text="Evengate Diogene" Font-Bold="True" Font-Names="Calibri" Font-Size="Small" ForeColor="White" ></asp:Label>     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     <asp:Label ID="Label5" runat="server" Text="Connexions Sécurisées" Font-Bold="True" Font-Names="Calibri" Font-Size="XX-Large" ForeColor="White" ></asp:Label>    
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Button ID="BT_ModificationMDP" runat="server" PostBackUrl="~/Pages_Connectees/Changement_MDP.aspx" Text="Modifier ma connexion" />
         </div>
 
        <p style="margin-left: 40px">Voici la liste des éléments que vous avez souhaité pouvoir controler à distance&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
 
        <div style="height: 600px; margin-left: 46px">
            <asp:PlaceHolder ID="PlaceHolder1" runat="server" ></asp:PlaceHolder> 
        </div>
 
 
        <div id="BasDePage" style="position: absolute; bottom: 0; left: 0; width: 100%;"> 
                <p>&copy; <%: DateTime.Now.Year %>- Evengate Applications</p>
                <!--<p> &copy; <%: DateTime.Now.Year %>- Evengate Applications</p> -->
        </div>
 
    </div>
    </form>
</body>
    </html>

Si quelqu'un voit ce que mon code devrait faire pour y arriver ... ;)

Merci par avance,

BSharp34