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?