Anpassad footer

PHPportalen Forum Index » HTML/CSS/JavaScript/Design
Lägg ett bokmärke på hela tråden
Skapa nytt inlägg   Svara på inlägget
Visa föregående ämne :: Visa nästa ämne  
Startad av: Meddelande
s22380



Medlem i: 1903 dagar

Status: Offline



#740987
Inlägg Skrivet: 2016-09-16 20:18      Ämne: Anpassad footer Citera

Har följande kod som ser ut som jag vill ha det förutom att höjden inte är anpassat efter innehållet. Vid lite innehåll ska sidan fyllas ut och footern vara kvar i botten och när information läggs till ska den pressas ner. Scrollbaren ska endast visas vid behov, dvs aldrig om du har lite info på sidan.

Har försökt med sticky kod men då hoppar footern upp.
Med den här koden hoppar footern upp och lämnar ett mellanrum i botten vilket vi inte vill ha. Hur gör jag för att alltid fylla ut sidan och ha footern i botten.

KOD:
1:
 
2:
<html>
3:
<head>
4:
<meta name="description" http-equiv="Content-Type" content="text/html; charset=utf-8">
5:
 
6:
<style>
7:
 
8:
   /*** The Essential Code ***/
9:
      * /* For CSS Reset */
10:
      {
11:
         padding: 0;
12:
         margin: 0;
13:
      }
14:
 
15:
      html {
16:
         min-height: 100%;
17:
      }
18:
      
19:
      body {
20:
         min-width: 630px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
21:
         overflow-y:auto;  /* auto scrollbars */
22:
      }
23:
      
24:
      html, body {
25:
         height: 100%;
26:
         width: 100%;
27:
      }
28:
       
29:
       #container
30:
        {
31:
            display:table;
32:
            width: 100%;
33:
            height: 100%;
34:
            margin: -30px 0 -100px;
35:
            padding: 30px 0 100px;
36:
            -moz-box-sizing: border-box;
37:
            box-sizing: border-box;
38:
        }
39:
 
40:
      #container .column {
41:
         display: table-cell;
42:
      }
43:
      
44:
      #center {
45:
         //padding: 10px 20px;       /* CC padding */
46:
      }
47:
      
48:
      #left {
49:
         width: 15%;             /* LC width */
50:
         //padding: 0 10px;          /* LC padding */
51:
      }
52:
      
53:
      #right {
54:
         width: 15%;             /* RC width */
55:
         //padding: 0 10px;          /* RC padding */
56:
      }
57:
      
58:
      #footer {
59:
         height: 200px;
60:
         width: 100%;
61:
      }
62:
      
63:
      /*** IE Fix ***/
64:
      * html #left {
65:
         left: 150px;              /* RC fullwidth */
66:
      }
67:
 
68:
      /*** Just for Looks ***/
69:
 
70:
      body {
71:
         margin: 0;
72:
         padding: 0;
73:
         background: #FFF;
74:
      }
75:
 
76:
      #footer {
77:
         font-size: large;
78:
         text-align: center;
79:
         padding: 0.3em 0;
80:
             -moz-box-sizing: border-box;
81:
            box-sizing: border-box;
82:
         background: #999;
83:
      }
84:
 
85:
      #left {
86:
         background: #999;
87:
      }
88:
      
89:
      #right {
90:
         background: #999;
91:
      }
92:
 
93:
      #container .column {
94:
         //padding-top: 1em;
95:
         text-align: justify;
96:
      }
97:
 
98:
/* END Info in footer */
99:
      
100:
      
101:
</style>
102:
 
103:
</head>
104:
 
105:
<body>
106:
   <div id="container">
107:
      <div id="left" class="column"></div>
108:
       
109:
        <div id="center" class="column">
110:
         <!--  START code for text about us -->
111:
         <div id="content">
112:
            fsffsddfsdsfsfdsffd
113:
         </div>
114:
      </div> <!-- END center DIV -->
115:
 
116:
      <!-- Right column Div -->
117:
      <div id="right" class="column"></div>
118:
      
119:
   </div> <!-- END Container DIV -->
120:
 
121:
   <div id="footer">
122:
         Company
123:
         About
124:
   </div>
125:
 
126:
</body>
127:
</html>
128:
 
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
info@aimdesign.se



Medlem i: 3776 dagar
Från: Märsta
Status: Offline



#741158
Inlägg Skrivet: 2016-10-28 21:14      Ämne: Citera

Ursäkta om jag har tolkat din fråga fel, men du är alltså ute efter att din div som heter footer alltid ska vara i botten på sidan, oavsett övrigt innehåll på sidan?

I så fall borde detta räcka:
Citat:

#footer {
position: fixed;
bottom:0px;
}
 

_________________
På svengelska -> It's not the fart that kills you, it's the smäll
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida
Visa tidigare inlägg:   
Skapa nytt inlägg   Svara på inlägget
PHPportalen Forum Index » HTML/CSS/JavaScript/Design
Hoppa till:  
Du kan inte skapa nya inlägg i det här forumet
Du kan inte svara på inlägg i det här forumet
Du kan inte ändra dina inlägg i det här forumet
Du kan inte ta bort dina inlägg i det här forumet
Du kan inte rösta i det här forumet
Du kan inte bifoga filer i detta forum
Du kan inte ladda ner filer från detta forum
Kontakta oss på adressen: info@phpportalen.net
Webbplatsen bygger i grunden på phpBB © 2001, 2002 phpBB Group

Modifieringar har senare gjorts i systemet av PHPportalen
Sid och logotypdesign skapad av Daren Jularic