html-Sticky-Footer will nicht so recht

AnonymusChaotic · 13. Dezember 2015

Ich bin gerade dabei, eine Seite zu bauen, die im Aufbau ähnlich der Seite https://developers.google.com/…atterns/tiny-tweaks?hl=en ist.

Dabei habe ich jetzt mal folgenden Code geschrieben:

HTML

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="style/style.css" type="text/css" rel="stylesheet" />
		<link rel="icon" href="/sys_img/favicon.ico">
		<title>MinecraftServerAdmin.net</title>

	</head>	
	<body>
	<script type="text/javascript"> 
		<nav class="" id="">
		<div class="" id="bigcontentarea">
				<header class="tabellen_zelle" id="">
						<h1>   
						<a class="menue-button menue-button-beschr-close" href="#nav-menue-zu">MENÜ zu</a>
						<a class="menue-button menue-button-beschr-open" href="#nav-menue">MENÜ auf</a>
						Minecraftadmin.net </h1>
				</header>




				<article class="tabellen_zelle maximale_hoehe" id="article">
					<h1>Lorem ipsum dolor sit amet,</h1>
					<p>consecteteur. Gravida, donec nam facilisi convallis. Morbi ornare. Dis fusce aliquam ultricies, duis nec. Mi rutrum et, eleifend posuere elit enim faucibus torquent. Nascetur urna et ipsum interdum et, vitae malesuada. Netus donec nostra ve sociis primis, fringilla aliquet ornare non in montes. Porttitor cras sem sociosqu vitae eros aliquam cras, porttitor eu malesuada. Bibendum, nibh mollis hymenaeos justo consequat faucibus volutpat ipsum. Sem.</p>
					<p>Ac morbi in nibh, class, dignissim. Rutrum duis per cras sit neque gravida platea, elit enim rutrum quisque orci. Per in class ve. Neque vestibulum nisi nulla. Nunc. Feugiat vel. Massa, pede ac consectetuer congue curae parturient. Ante elit dapibus magna est posuere ve. Malesuada pellentesque nonummy curabitur duis mus augue cubilia. Imperdiet lorem tristique nisi gravida mi, congue. Condimentum per, at. Egestas accumsan morbi feugiat in consequat ullamcorper, fringilla enim quisque et fermentum. Quisque.</p>
					<p>Semper cursus pharetra est viverra metus id montes. Nec, justo habitasse vestibulum nunc purus congue congue proin nec erat ridiculus elit nullam massa ornare. Eros, non justo per dolor leo neque. Est enim non leo nam at facilisi lacinia. Aliquam. Nibh mus nisi adipiscing platea id interdum laoreet natoque rutrum est at. Sem. Gravida ridiculus non neque natoque accumsan risus urna lectus, euismod elementum sem vitae metus, sed. Aliquet in, ac dui fringilla. Ornare hendrerit dictumst. Quam nec class sociis vestibulum nulla. Euismod, cras semper varius bibendum. Mus, lacinia at, sed nunc parturient sem parturient parturient. Morbi varius duis, mauris id torquent feugiat felis magna dis molestie.</p>




				</article>




				<footer class="tabellen_zelle" id="">
					<ul>
						<li class="footer_list_element" id="footer_list_element1"><a>Lorem Ipsum</a></li>
						<li class="footer_list_element" id="footer_list_element1"><a>Lorem Ipsum</a></li>
						<li class="footer_list_element" id="footer_list_element1"><a>Lorem Ipsum</a></li>
						<li class="footer_list_element" id="footer_list_element1"><a>Lorem Ipsum</a></li>
						<li class="footer_list_element" id="footer_list_element1"><a>Lorem Ipsum</a></li>

					</ul>

				</footer>	
		</div>
	</body>













</html>

Alles anzeigen

und

CSS

*{
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
   box-sizing: border-box;
}




html, body {
	height: 100%;
}




body {
	display: table;
	width: 100%;
	background-color: gray;
}




nav {
	float: left;
	width: 200px;
	height: 100%;
	overflow-y: auto; /* scrollbarkeit */
	background-color: silver;

}
#bigcontentarea {
width: calc(100% - 200px);




	float: left;
	min-height: 100%;
}
header {
	padding: 1em;
	background-color: yellow;




}
#article {
	    background-color: orange;
}
footer {
		padding: 0.7em;
		background-color: pink;
}
.tabellen_zelle {
    display: table-row;




}




.maximale_hoehe {
    height: 100%;
    background-color: deepskyblue;
}










/*mobile Steuerung*/
.menue-button {
 	display: none;
}

Alles anzeigen

Jetzt soll der Footer wie im Sticky footer-tutorial http://www.html-seminar.de//re…bdesign-sticky-footer.htm unten kleben. Das will aber nicht so, wie ich das will. Also mit 100% höhe geht es nicht, aber mit 1000px höhe wird der Bereich 1000px hoch. warum? Was muss ich ändern, damit ein sticky footer auch in der Div funktioniert?

MrMurphy · 13. Dezember 2015

Hallo,

bei deinem Quelltext scheint ein Teil zu fehlen. So wird ein nav-Element geöffnet, aber nicht wieder geschlossen und hat auch keinen Inhalt.

Es wäre schön wenn du dir beim Einstellen des Quelltextes etwas mehr Mühe geben würdest. Mit solchen Fehlern sinkt die Hilfsbereitschaft im allgemeinen ungemein.

Zitat

Also mit 100% höhe geht es nicht, aber mit 1000px höhe wird der Bereich 1000px hoch. warum?

% und fixe Einheiten werden unterschiedlich vom Browser interpretiert.

1000px sind 1000px.

Bei % muss man aber immer bedenken, wovon die % genommen werden sollen. Bei height von der Höhe des umgebenden Elements. Wenn das nicht die gesamte Bildschirmhöhe ausfüllt kann das innenliegende mit der 100%-height-Angabe das auch nicht. Du musst also dafür sorgen, dass alle umgebenden Elemente (Eltern- , Großelternelemente u.s.w.) bereits über die gewünschte Höhe verfügen.

Insgesamt kann in deinem Beispiel die Sticky Footer-Methode mit display:table nicht funktionieren. #bigcontentarea zerstört die Tabellenkonstruktion.

Gruss

MrMurphy

AnonymusChaotic · 13. Dezember 2015

I'm sorry, das war ein Kopierfehler. Mein Editor (bluefish) kann Elemente einklappen, zeigt das aber nicht immer zu 100% korrekt an. heißt: Der HTML-Code ist bis auf die vielfache Verwendung der ids im Footer und die (noch) leeren ID-Definitionen in den Elementen durchaus valide.

Hier noch mal vollständig kopiert:

HTML

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="style/style.css" type="text/css" rel="stylesheet" />
		<link rel="icon" href="/sys_img/favicon.ico">
		<title>MinecraftServerAdmin.net</title>

	</head>	
	<body>
	<script type="text/javascript"> 
	   var position = 0;
      var mainPanel = document.getElementById("mainPanel");
      var leftDrawer = document.getElementById("leftDrawer");
      var rightDrawer = document.getElementById("rightDrawer");




      function toggle(evt) {
        position++;
        if (position % 3 == 0) {
          leftDrawer.classList.remove("open");
          rightDrawer.classList.remove("open");
        } else if (position % 3 == 1) {
          leftDrawer.classList.add("open");
          rightDrawer.classList.remove("open");
        } else {
          leftDrawer.classList.remove("open");
          rightDrawer.classList.add("open");
        }  
      }




      mainPanel.addEventListener("click", toggle);
      leftDrawer.addEventListener("click", toggle);
      rightDrawer.addEventListener("click", toggle);

    </script>




		<nav class="" id="">
					<div><h1 id="logo">MinecraftServer<br />Admin.net</h1></div>
					<ul class="nav_list">
						<li class="nav_list_element" id="nav_list_element1"><a class="nav_link_element">Lorem Ipsum</a></li>
						<li class="nav_list_element" id="nav_list_element2"><a class="nav_link_element" href="http://google.at/">Lorem Ipsum</a></li>
						<li class="nav_list_element" id="nav_list_element3"><a class="nav_link_element">Lorem Ipsum</a></li>
						<li class="nav_list_element" id="nav_list_element4"><a class="nav_link_element">Lorem Ipsum</a></li>
						<li class="nav_list_element" id="nav_list_element5"><a class="nav_link_element">Lorem Ipsum</a></li>
						<li class="nav_list_element" id="nav_list_element6"><a class="nav_link_element">Lorem Ipsum</a></li>
						<li class="nav_list_element" id="nav_list_element7"><a class="nav_link_element">Lorem Ipsum</a></li>


					</ul>
		</nav>




		<div class="" id="bigcontentarea">
				<header class="tabellen_zelle" id="">
						<h1>   
						<a class="menue-button menue-button-beschr-close" href="#nav-menue-zu">MENÜ zu</a>
						<a class="menue-button menue-button-beschr-open" href="#nav-menue">MENÜ auf</a>
						Minecraftadmin.net </h1>
				</header>




				<article class="tabellen_zelle maximale_hoehe" id="article">
					<h1>Lorem ipsum dolor sit amet,</h1>
					<p>consecteteur. Gravida, donec nam facilisi convallis. Morbi ornare. Dis fusce aliquam ultricies, duis nec. Mi rutrum et, eleifend posuere elit enim faucibus torquent. Nascetur urna et ipsum interdum et, vitae malesuada. Netus donec nostra ve sociis primis, fringilla aliquet ornare non in montes. Porttitor cras sem sociosqu vitae eros aliquam cras, porttitor eu malesuada. Bibendum, nibh mollis hymenaeos justo consequat faucibus volutpat ipsum. Sem.</p>
					<p>Ac morbi in nibh, class, dignissim. Rutrum duis per cras sit neque gravida platea, elit enim rutrum quisque orci. Per in class ve. Neque vestibulum nisi nulla. Nunc. Feugiat vel. Massa, pede ac consectetuer congue curae parturient. Ante elit dapibus magna est posuere ve. Malesuada pellentesque nonummy curabitur duis mus augue cubilia. Imperdiet lorem tristique nisi gravida mi, congue. Condimentum per, at. Egestas accumsan morbi feugiat in consequat ullamcorper, fringilla enim quisque et fermentum. Quisque.</p>
					<p>Semper cursus pharetra est viverra metus id montes. Nec, justo habitasse vestibulum nunc purus congue congue proin nec erat ridiculus elit nullam massa ornare. Eros, non justo per dolor leo neque. Est enim non leo nam at facilisi lacinia. Aliquam. Nibh mus nisi adipiscing platea id interdum laoreet natoque rutrum est at. Sem. Gravida ridiculus non neque natoque accumsan risus urna lectus, euismod elementum sem vitae metus, sed. Aliquet in, ac dui fringilla. Ornare hendrerit dictumst. Quam nec class sociis vestibulum nulla. Euismod, cras semper varius bibendum. Mus, lacinia at, sed nunc parturient sem parturient parturient. Morbi varius duis, mauris id torquent feugiat felis magna dis molestie.</p>




				</article>




				<footer class="tabellen_zelle" id="">




					<ul>
						<li class="footer_list_element" id="footer_list_element1"><a>Lorem Ipsum</a></li>
						<li class="footer_list_element" id="footer_list_element1"><a>Lorem Ipsum</a></li>
						<li class="footer_list_element" id="footer_list_element1"><a>Lorem Ipsum</a></li>
						<li class="footer_list_element" id="footer_list_element1"><a>Lorem Ipsum</a></li>
						<li class="footer_list_element" id="footer_list_element1"><a>Lorem Ipsum</a></li>

					</ul>

				</footer>	
		</div>
	</body>













</html>

Alles anzeigen

So sieht die Seite dann im Browser aus (habe im CSS noch den Bereich #bigcontentarea grün gefärbt, um zu demonstrieren, dass der tatsächlich die volle höhe einnimmt)
Die Navigation hat auch noch ein bisschen Design bekommen.

Hier noch mal der CSS-Code:

CSS

*{
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
   box-sizing: border-box;
}




html, body {
	height: 100%;
}




body {
	display: table;
	width: 100%;
	background-color: gray;
}




nav {
	float: left;
	width: 200px;
	height: 100%;
	overflow-y: auto; /* scrollbarkeit */
	background-color: silver;

}
#bigcontentarea {
width: calc(100% - 200px);




	float: left;
	min-height: 100%;
	background-color: green;
}
header {
	padding: 1em;
	background-color: yellow;




}
#article {
	    background-color: orange;
}
footer {
		padding: 0.7em;
		background-color: pink;
}
.tabellen_zelle {
    display: table-row;




}




.maximale_hoehe {
    height: 100%;
    background-color: deepskyblue;
}




#logo {
	color: red;
	background-color: gray;

}




/*mobile Steuerung*/
.menue-button {
 	display: none;
}




/* Navigation */
.nav_list_element {
	list-style: none;
	padding: 0.7em;




	
}
.nav_link_element {
	text-decoration: none;
	font-weight: 700;
}
.nav_link_element:visited {
	color: gray;
	text-decoration: none;
}




.nav_link_element:active {
	color: gray;
	text-decoration: none;
}
















#nav_list_element1 {
	border-left: 10px #CC0000 solid;
} 
#nav_list_element1:hover {
	background-color: #CC0000;
	color: white;
}







#nav_list_element2 {
	border-left: 10px #FF7200 solid;
} 
#nav_list_element2:hover {
	background-color: #FF7200;
	color: white;
}




#nav_list_element3 {
	border-left: 10px #FFBB0D solid;
} 
#nav_list_element3:hover {
	background-color: #FFBB0D;
	color: white;
}




#nav_list_element4 {
	border-left: 10px #1B8500 solid;
} 
#nav_list_element4:hover {
	background-color: #1B8500;
	color: white;
}










#nav_list_element5 {
	border-left: 10px #D800FF solid;
} 
#nav_list_element5:hover {
	background-color: #D800FF;
	color: white;
}













#nav_list_element6 {
	border-left: 10px #160CFA solid;
} 
#nav_list_element6:hover {
	background-color: #160CFA;
	color: white;
}










#nav_list_element7 {
	border-left: 10px #0099FF solid;
} 
#nav_list_element7:hover {
	background-color: #0099FF;
	color: white;
}







footer li {
	list-style: none;
	float: left;
	display: block;
	padding: 0.7em;
	background-color: red;
}

Alles anzeigen

Zitat von MrMurphy

Bei % muss man aber immer bedenken, wovon die % genommen werden sollen. Bei height von der Höhe des umgebenden Elements. Wenn das nicht die gesamte Bildschirmhöhe ausfüllt kann das innenliegende mit der 100%-height-Angabe das auch nicht. Du musst also dafür sorgen, dass alle umgebenden Elemente (Eltern- , Großelternelemente u.s.w.) bereits über die gewünschte Höhe verfügen.

Insgesamt kann in deinem Beispiel die Sticky Footer-Methode mit display:table nicht funktionieren. #bigcontentarea zerstört die Tabellenkonstruktion.

Weshalb? Ich müsste doch theoretisch in jeder! Div einen Sticky footer nach dem oben verlinkten Tutorial machen können? Und bigcontentarea IST groß genug. Auch wenn ich #bigcontentarea sage, dass es auch eine tabellenreihe sein soll, ändert das nichts.

und wie könnte ich das sonst lösen? beim klassischen würde ich mir ja das mobile Design zerstören, sonst gäbe es ja kein Tutorial für ein extra mobiles design.

MrMurphy · 13. Dezember 2015

Hallo

Zitat

Ich müsste doch theoretisch in jeder! Div einen Sticky footer nach dem oben verlinkten Tutorial machen können?

Richtig. Erst mal musst du dich aber an die Regeln von HTML und CSS halten.

Wenn du im CSS display:table vorschreibst, muss sich das HTML auch an den Aufbau einer Tabelle halten. Mit allen Vor-, aber auch Nachteilen. Und das ganze Konstrukt verhält sich dann auch wie eine Tabelle.

So dürfen sich zwischen table, table-row und table-cell keine weiteren Elemente befinden.

Auf deiner Webseite folgt jedoch auf body (= table) zunächst #bigcontentarea und dann erst mit nav (= table-row) die erste Tabellenzeile. Anstatt body müsste also #bigcontentarea die Eigenschaft display:table bekommen.

Gruss

MrMurphy

AnonymusChaotic · 13. Dezember 2015

Danke, funktioniert!

html-Sticky-Footer will nicht so recht

Jetzt mitmachen!

Teilen