Próbuję ustawić stopkę tak, aby była przyklejona do dołu strony niezależnie od ilości tekstu na stronie.
Znalazłem http://ryanfait.com/resources/footer-stick-to-bottom-of-page/, lecz w jakiś sposób przedstawione tam rozwiązanie gryzie się ze moimi stylami sekcji.
Kod HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="Karton" />
<meta name="description" content="bla bla bla" />
<meta name="keywords" content="bla bla" />
<meta http-equiv="content-language" content="pl" />
<title>Wstęp</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="wrapper">
<header>
<h1>Tytuł główny</h1>
</header>
<nav>
<ul id="menu">
<li id="active"><a href="index.php" title="">Wstęp</a></li>
<li class="a">coś tam coś
<ul>
<li><a href="smerf.php">smerfy</a></li>
<li><a href="maruda.php">smerfetka</a></li>
<li><a href="ważniak.php">osiłek</a></li>
</ul>
</li>
<li class="a">papa
<ul>
<li><a href="zpsk.php">gargamel</a></li>
<li><a href="coś.php">klakier</a></li>
<li><a href="filifionka.php">muminek</a></li>
<li><a href="sakurazukamori.php">migotka</a></li>
<li><a href="tata_muminka.php">mama muminka</a></li>
<li><a href="buka.php">włuczykij</a></li>
<li><a href="asdasd.php">alsdjh</a></li>
<li><a href="dpsk.php">pikaczu</a></li>
<li><a href="dwpj.php">bulbazałr</a></li>
</ul>
</li>
<li><a href="podsumowanie.php" title="">Podsumowanie</a></li>
<li class="a">Załączniki
<ul>
<li><a href="test.html" title="">Link</a></li>
<li><a href="test2.html" title="">Link</a></li>
<li><a href="#" title="">Link</a></li>
<li><a href="#" title="">Link</a></li>
<li><a href="#" title="">Link</a></li>
<li><a href="#" title="">Link</a></li>
<li><a href="#" title="">Link</a></li>
<li><a href="#" title="">Link</a></li>
<li><a href="#" title="">Link</a></li>
</ul>
</li>
</ul>
</nav>
<section>
tu cała treść strony
</section>
<p class="push" />
</div>
<footer>
<p>Strona wykonana w HTML 5</p>
</footer>
</body>
</html>
Kod CSS:
*{
margin: 0px;
padding: 0px;
}
html{
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -2.5em;
}
.push{
height: 2.5em;
}
footer {
height: 2.5em;
font: 13px Arial, Verdana, Tahoma;
}
footer p{
background-color: #888;
padding: 10px 15px;
}
header{
position:relative;
text-align: center;
text-transform: uppercase;
font-family: Georgia;
font-size: larger;
top:30px;
z-index: 2;
}
nav{
position: relative;
top:30px;
}
body{
height: 30%;
background-color: black;
font-size: medium;
font-family: Helvetica, Verdana, Thoma;
color: white;
line-height:130%;
}
section{
position:relative;
top: 60px;
left:250px;
z-index: 1;
}
aside{
position:fixed;
top:120px;
border-style: solid;
border-color: lime;
width: 200px;
z-index: 1;
}
ul#aside{
list-style-type: none;
text-transform: uppercase;
font:13px Arial, Verdana, Thoma;
}
ul#aside a{
text-decoration: none;
}
a{
color:inherit;
}
ul#aside li li a{
text-decoration:none;
}
#menu{
overflow: hidden;
background: #888;
padding: 2px 15px;
font: 13px Arial, Verdana, Tahoma;
}
ul#menu li{
list-style-type: none;
float: left;
}
ul#menu li#active
{
background:#000000;
}
ul#menu li a{
display: block;
padding: 8px;
color: #fff;
text-decoration: none;
}
ul#menu li.a{
display: block;
padding: 8px;
color: #fff;
text-decoration: none;
}
ul#menu li li a{
width: 160px;
padding: 6px 12px;
}
ul#menu li li:hover{
background: #999;
}
ul#menu li ul{
overflow: hidden;
display:none;
}
ul#menu li:hover ul{
position: absolute;
background: #aaa;
padding:0;
border:1px solid #999;
display: block;
width: 160px;
z-index: 2;
}
fieldset{
font-family: "Courier New", Courier, monospace;
}
legend{
font-size: large;
}
table{
border: solid 1px;
font-family: "Courier New", Courier, monospace;
}
td{
border: solid 1px;
}
Gdy zmieniam w sekcji pozycjonowanie na absolutne, nie mam dolnego przewijania, ale stopka jest w niewłaściwym miejscu.
Co zrobić, aby stopka była na dole strony niezależnie od ilości tekstu, i nie tworzył się dolny pasek?