Hallo zusammen,
ich habe folgende Frage bzw. folgendes Problem:
Ich möchte bei einem responsive Design, das auf den Viewport 1280x720 ausgelegt ist und bei allen anderen Auflösungen sich automatisch vertikal und horizontal zentriert, einen Sticky Footer haben.
Wichtig ist aber, dass der Footer auch bei der Zentrierung, die bei anderen Auflösungen erfolgt, der Seite berücksichtigt werden soll. Der Footer soll also in dem Fall nicht unten am Ende des Viewports sein, sondern zusammen mit den anderen Elementen horizontal und vertikal zentriert werden.
Also im Prinzip so: Klick
Ich hab es also theoretisch schon, aber leider geht das nicht mehr, wenn ich mehr Inhalt in den Content-Bereich einfüge: Klack
Ich hoffe es ist halbwegs verständlich, was ich meine.
Hier noch der Code:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Startseite</title>
<meta charset="UTF-8">
<link href="style2.css" type="text/css" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<p id="logo" class="inline-block">Carblog</p>
<div id="profilbild" class="inline-block">
<p>Profilbild</p>
</div>
<div id="profil" class="inline-block">
<p>Profil:<br>
Chris333<br>
Auto:<br>
Toyota Celica T23</p>
</div>
<div id="suchleiste" class="inline-block">
<p>Suchleiste</p>
</div>
<div id="messenger-button" class="inline-block">
<p>Messenger Button</p>
</div>
<div id="menue-button" class="inline-block">
<p>Menü<br> Button</p>
</div>
</header>
<nav>
<ul>
<li><a href="index.php">Startseite</a></li>
<li><a href="gruppen.php">Gruppen</a></li>
<li><a href="events.php">Events</a></li>
<li><a href="autohandel.php">Autohandel</a></li>
<li><a href="verkehrsmelder.php">Verkehrsmelder</a></li>
<li><a href="spotted.php">Spotted</a></li>
</ul>
</nav>
<main>
<section id="section-left" class="inline-block">
<p>Benachrichtigungen/News zum eigenen Profil etc.</p>
</section>
<section id="section-middle" class="inline-block">
<p>Allgemeine News</p>
</section>
<section id="section-right" class="inline-block">
<p>Verkehrsmeldungen etc.</p>
</section>
</main>
<aside>
<p>Werbung</p>
</aside>
</div>
<footer>
</footer>
</body>
</html>/* Desktop Style ( Viewport 1280 x 720 ) */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
font-size: 100%;
font-family: sans-serif;
}
header, nav, main, section, aside, footer {
display: block;
}
.inline-block {
display: inline-block;
}
#wrapper {
position: relative;
height: 100%;
min-height: calc(100vh - 20px);
}
header {
height: 11.111%;
background-color: #BD0023;
}
header #logo {
padding-top: 1.4%;
padding-left: 1.56%;
font-size: 2.24rem;
font-weight: bold;
color: white;
}
header #profilbild {
width: 4.687%;
height: 70%;
margin-top: 0.895%;
margin-left: 16%;
vertical-align: top;
background-color: white;
}
header #profilbild p {
padding-top: 6%;
text-align: center;
font-size: 0.8rem;
}
header #profil {
width: 9.374%;
height: 69.988%;
margin-top: 0.806%;
margin-left: 0.16%;
vertical-align: top;
background-color: #BD0023;
}
header #profil p {
font-size: 0.8rem;
color: white;
}
header #suchleiste {
width: 19.53%;
height: 26%;
margin-top: 2.25%;
margin-left: 5.335%;
vertical-align: top;
border-radius: 0.312rem;
text-align: center;
background-color: white;
}
header #suchleiste p {
padding-top: 1.2%;
font-size: 0.8rem;
}
header #messenger-button {
width: 4.7%;
height: 70%;
margin-top: 0.895%;
margin-left: 6%;
vertical-align: top;
border-radius: 50%;
text-align: center;
background-color: white;
}
header #messenger-button p {
padding-top: 27%;
font-size: 0.56rem;
}
header #menue-button {
width: 4.7%;
height: 70%;
margin-top: 0.895%;
margin-left: 3.5%;
vertical-align: top;
border-radius: 50%;
text-align: center;
background-color: white;
}
header #menue-button p {
padding-top: 27%;
font-size: 0.56rem;
}
nav {
display: inline-block;
width: 100%;
height: 4.5%;
margin-top: 0;
background-color: #FF011F;
}
nav ul li {
display: inline;
}
nav ul li a {
display: inline-block;
width: 10.8%;
float: left;
text-align: center;
padding-top: 0.5%;
padding-bottom: 0.5%;
font-size: 1.04rem;
color: white;
text-decoration: none;
-webkit-transition: background-color .3s linear;
transition: background-color .3s linear;
}
nav ul li a:hover {
background-color: #ac090d;
}
main {
width: 86.822%;
height: 77.7%;
float: left;
margin-top: -0.3%;
}
main #section-left {
width: 20%;
height: 92%;
margin-top: 1.8%;
margin-left: 6.75%;
margin-bottom: 1.8%;
padding: 1%;
vertical-align: baseline;
border-radius: 1.25rem;
background-color: #E9E7E7;
}
main #section-middle {
width: 42.158%;
height: 92%;
margin-left: 3%;
margin-bottom: 1.8%;
padding: 1%;
vertical-align: bottom;
border-radius: 1.25rem;
background-color: #E9E7E7;
}
main #section-right {
width: 16.863%;
height: 92%;
margin-left: 3%;
margin-bottom: 1.8%;
padding: 1%;
vertical-align: bottom;
border-radius: 1.25rem;
background-color: #E9E7E7;
}
aside {
width: 13.177%;
height: 77.7%;
margin-left: 86.8%;
margin-top: -0.3%;
border-left: 0.0625rem solid black;
}
aside p {
text-align: center;
padding-top: 150%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: #BD0023;
}Wer sich den aktuellen Stand lieber im eigenen Browser ansehen will, kann mal hier vorbeischauen.
Zusätzlich würde es mich sehr freuen, wenn jemand generell mal über den Code etc. gucken würde und dazu seine Meinung, Tipps usw. abgegeben würde. Besonders interessieren würde es mich, ob es bei der Zentrierung der Website bessere Möglichkeiten gibt, die auch funktionieren.
Das aktuelle Ergebnis ist nämlich mehr durch Ausprobieren entstanden, bis es dann irgendwann funktionierte. 
So, dann bedanke ich mich schon mal und hoffe, ihr könnt mir helfen. 
Gruß
JR Cologne
Hab ich mich unverständlich ausgedrückt oder weiß keiner eine Lösung?
