Wie kann man dafür sorgen, dass die Fußzeile beim Scrollen nur dann sichtbar ist, wenn sie sich am Ende der Seite befind ⇐ CSS

[Anonymous]

Ich erstelle eine Website und habe eine Fußzeile erstellt. Der Nachteil ist jedoch, dass sich die Fußzeile immer an der exakt gleichen Stelle auf dem Bildschirm befindet, egal wohin ich scrolle. Ich möchte, dass die Fußzeile nur ganz unten auf der HTML-Seite sichtbar ist (dort, wo die Fußzeile sein sollte). Ich habe position:fixed; verwendet, damit es unten auf der Seite fixiert ist. Der Nachteil ist jedoch das, was ich oben erwähnt habe. Für Vorschläge sind wir sehr dankbar
Bild:
index.html

Code: Select all

Home







Home

a-town youth
[i]

[/i]


[list]
[url=#section1]Home[/url]
[url=#section2]About[/url]
[url=#section3]Calendar[/url]
[url=#section4]News[/url]
[url=#section5]Contact[/url]
[url=#section6]Links[/url]



[i][/i]

[/list]



body {
margin:0px;
}
.colour-block {
background:#34495e;
width:60%;
padding:7% 20% 10% 20%;
color:#fff;
}
.white-block {
background:#fff;
width:60%; /*Change this to change padding/margin around text in dividers*/
padding:7% 20% 10% 20%;
color:#823A9C;
}

h1 {
text-align:center;
font-size:80px;
font-family:'wire one', serif;
font-weight:normal;
}
p {
font-size:20px;
font-family:'Raleway', serif;
}

/*------------------*/
/*  SKEW CLOCKWISE  */
/*------------------*/
.skew-cc{
width:100%;
height:100px;
position:absolute;
left:0px;
background: linear-gradient(to right bottom, #34495e 49%, #fff 50%),    linear-gradient(-50deg, #ffffff 16px, #000 0);
}

/*-------------------------*/
/* SKEW COUNTER CLOCKWISE  */
/*-------------------------*/
.skew-c{
width:100%;
height:100px;
position:absolute;
left:0px;
background: linear-gradient(to left bottom, #fff 49%, #34495e 50%);
}

@media (max-width: 767px){
.colour-block h1, .white-block h1{ padding-top: 60px;}
}

.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #34495e;
color: white;
text-align: center;
}





Home
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

About
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.  Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Calendar
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

News
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Contact
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Links
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.